前端素材 设计元素 界面设计 网页素材 网站模板 按钮素材 名片素材 字体设计 图标设计 生活百科
官方客服QQ号:3007971137  (一条龙搭建-联系我)
官方客服QQ号:3007947123  (一条龙搭建-联系我)

jQuery图片批量上传插件,多图上传插件(案例教程)

前端素材 技术03-千编万码 7月前  次浏览

jQuery图片批量上传插件,多图上传插件(案例教程)

1、批量选择+指量上传

2、在线排序编辑

3、在线删除图片(支持同时删除服务器上的图片)

4、上传进度条显示

5、无需Flash

效果图:

001.jpg

1、html部分:

<link href="css/upload.css" rel="stylesheet">
<div id="xc_upload"></div>

2、jQuery部分:

<script src="js/youhutong_upload.js"></script>
<script type="text/javascript">
$(function() {
    var md = "product";
    var pid = "asdasdasdasdasd";
    $.Tupload.init({
        url     : "./upload.php?md=" + md + "&pid=" + pid,
        title   : "大小不能超过500kb,避免图片上传出现问题,请尽量选择完毕图片后再上传",
        fileNum : 10,                        // 上传文件数量
        divId   : "xc_upload",               // div  id
        accept  : "image/jpeg,image/x-png",  // 上传文件的类型限制
        fileSize: 51200000,                  // 上传文件的大小限制
        // 上传成功
        onSuccess: function(obj, i) {
            var data =eval('(' + obj.currentTarget.response + ')');
            if(data.file != '' || data.file != undefined){
                $("#image_value"+i).attr('value',data.file);
            }
        },
        // 删除图片
        onDelete: function(i) {
            var val = $("#image_value"+i).attr("value");
            $("#image_value"+i).attr("value","");
            /*  如果已经上传到服务器  可通过这来一起删除服务器的文件
            if(val != '' && val != undefined){
                var md = "product";
                $.ajax({
                    type:"POST",
                    url: "base/delPic" ,
                    data : {val:val, id:pid, md:md},
                    success: function(rel){}
                });
            }*/
        }
    });
})
</script>


3、PHP部分:

<?php
date_default_timezone_set("Asia/Shanghai");
//   1、图片文件上传处理     (上传逻辑就自己写了。)
/*
    接收到$_FILES数据格式如下:
    'file'=>(
        'name'     => 'a1.jpg',
        'type'     => 'image/jpeg',
        'tmp_name' => 'C:\\Users\\Administrator\\AppData\\Local\\Temp\\1\\php5F5B.tmp',
        'error'    => 0,
        'size'     => 169891
    ),
*/
 
//   2、返回值
// 假如这是上传成功后得到的文件名
$file = date("Ymd_").rand(1000,9999).'.jpg';  
$res = array(
        'success' => true,
        'file'    => $file
    );
die(json_encode($res));
 
 
?>





相关链接

发表评论