plupload是一个单图和多图上传控件:
属性和方法介绍,参考以下博客:
https://www.cnblogs.com/2050/p/3913184.html
这里直接贴出JS代码,细到爆的注释,可以直接使用:
var uploader = new plupload.Uploader({ //创建实例的构造方法 runtimes: 'html5,flash,silverlight,html4', //上传插件初始化选用那种方式的优先级顺序 browse_button: 'btn', // 上传按钮ID url: "<?php echo url2('case_detail','upload')?>",//"ajax.php", //远程上传地址 // flash_swf_url: 'plupload/Moxie.swf', //flash文件地址 // silverlight_xap_url: 'plupload/Moxie.xap', //silverlight文件地址 filters: { max_file_size: '500kb', //最大上传文件大小(格式100b, 10kb, 10mb, 1gb) mime_types: [ //允许文件上传类型 { title: "files", extensions: "jpg,png,gif,ico" } ] }, multi_selection: true, //true:ctrl多文件上传, false 单文件上传 init: { FilesAdded: function (up, files) { //文件上传前事件 var picTotal = 0;//计算选择的图片和已经存在图片总和 var picLimit = 5;//图片限制数量 //计算将要上传文件图片数量 plupload.each(files, function (file) { //遍历文件 picTotal++; }); //计算已经存在图片数量 picTotal += $("#ul_pics").children("li").length; if (picTotal > picLimit) {//控制上传文件数量 alert(`您上传的图片限制${picLimit}张以内`); return false; //返回false,表示取消当前上传 //uploader.destroy(); //直接销毁upload对象,将导致无法再次点击 //window.location.reload(); //浏览器直接刷新,当前已经上传的丢失 } else { var li = ''; plupload.each(files, function (file) { //遍历文件,生成上传进度标签 li += "<li id='" + file['id'] + "'><div class='progress'><span class='bar'></span><span class='percent'>0%</span></div></li>"; }); $("#ul_pics").append(li); uploader.start(); //开始上传 } }, UploadProgress: function (up, file) { //上传中,显示进度条 var percent = file.percent; $("#" + file.id).find('.bar').css({ "width": percent + "%" }); $("#" + file.id).find(".percent").text(percent + "%"); }, FileUploaded: function (up, file, info) { //文件上传成功的时候触发 var data = eval("(" + info.response + ")"); console.log(data); //打印返回数据
//回显图片,并在<a>标签中登记onclick删除方法, $("#" + file.id).html("<div class='img' style='position: relative;'><a style='position: absolute;top:0;right: 0;' href='javascript:;' οnclick='delUploadFile(this)'><img src='<?php echo PUBLIC_STATIC; ?>/images/common/X.png' alt=''></a><img src='" + data.data.path + "'/></div><input type='hidden' name='pics[]' value='"+data.data.src+"'>"); }, Error: function (up, err) { //上传出错的时候触发 alert(err.message); }, FilesRemoved:function(uploader,file){//当删除文件事件,在删除文件后触发 $("#ul_pics").find("li#"+file[0].id).remove(); } } }); uploader.init(); //删除方法 function delUploadFile(el){ var removeId = $(el).parent().parent().attr('id');//得到文件ID for(let i in uploader.files){ if(uploader.files[i].id === removeId){ uploader.removeFile(uploader.files[i]); //在files数组中删除上传文件,并触发FilesRemoved事件
break;
}
}
}
前端代码: