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:;' onclick='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;
       }
     }
  }

前端代码:

最新文章

  1. Java并发编程底层实现原理 - volatile
  2. 自然语言6_treebank句子解析
  3. VMware下 Ubuntu 看不到共享文件夹之解决办法
  4. wampserver php多版本5.2--5.6和apche2.2/2.4
  5. Android 项目利用 Android Studio 和 Gradle 打包多版本APK
  6. 超轻量级高性能ORM数据访问组件Deft,比dapper快20%以上
  7. Java 学习内容总结
  8. cp 命令详解
  9. Azkaban-2.5及Plugins的安装配置
  10. 几种扫描二维码工具的User-Agent
  11. 把一个给定的值存储到一个整数中指定的几个位《C与指针5.8.5》
  12. 使用JavaMail创建邮件和发送邮件
  13. vue+vue-router+vuex实战
  14. Spring从认识到细化了解
  15. luogu P4161 [SCOI2009]游戏
  16. [No0000CD]shell 中的单行注释和多行注释
  17. NET Core MVC中创建PDF
  18. webpack+sass+vue 入门教程(一)
  19. Google 和 Facebook 如何大规模处理 IT 事件管理 —— 2016 SRE 大会之我见
  20. Tomcat不同版本所对应的Servlet/JSP规范

热门文章

  1. 覆盖equals方法时请遵守通用约定
  2. Validation(4)-临时
  3. typescript学习笔记(一)----基础类型
  4. Windows下MySQL8.0.13解压版安装教程
  5. python连接mysql时连接不到test文件夹怎么办
  6. B.小A与任务
  7. RTT
  8. 牛客网Java刷题知识点之Iterator和ListIterator的区别
  9. Nodejs 文件修改自动重启扩展
  10. C# winwordcontrol控件编程