项目的需求是,客户端可以上传图片,后端需要审核图片,图片如果上传失败需要重新上传进行审核!直接先看demo。狠狠点击这里
代码地址:https://github.com/efri-yang/plupupload/tree/plupload-h5/src
该插件是基于plupload2.3.6(https://www.plupload.com/)进行封装,官网提供的jquery ui版本太重了,UI也无法满足个性自定义的的需求,所以….
插件开放的参数(和plupload同名参数都是沿用官方的配置)
参数 | 描述 | 默认值 |
---|---|---|
type | 插件上传方式有两种,1、添加文件,通过单击按钮才能上传。2、添加文件直接触发上传 | 1 |
url | 上传图片后端链接地址(根据实际地址传入) | null |
initLoad | Plupload初始化完成后触发监听函数 | Function |
fileUploaded | 图片上传成功后触发监听函数 | Function |
fileRemoved | 图片删除触发的监听函数 | Function |
uploadComplete | 图片上传完成后(不管失败与否都触发,多图上传只触发一次)触发的监听函数 | Function |
———-下面的参数配置与传值与官方文档一致———- | ||
chunk_size | 分片上传文件时,每片文件被切割成的大小 | 3M |
multi_selection | 是否可以在文件浏览对话框中选择多个文件 | true |
multipart_params | 上传时的附加参数,以键/值对的形式传入,服务器端可是使用$_POST来获取这些参数 | Object |
filters | 该参数来限制上传文件的类型,大小等(参照官方文档) | Object |
resize | 上传的图片进行压缩(配置参照官方文档) | Object |
runtimes | 用来指定上传方式,指定多个上传方式请使用逗号隔开。根据浏览器的兼容来选择最佳的上传方式! | html5,flash,silverlight,html4 |
browse_button | 触发文件选择对话框的DOM元素,触发选择的按钮 | J_pickfiles |
flash_swf_url | flash上传组件的url地址 | ./js/plupload/Moxie.swf(根据你实际的路劲进行调整) |
silverlight_xap_url | silverlight上传组件的url地址 | ./js/plupload/Moxie.xap(根据实际的路劲进行调整) |
调用方式
$("#J_pickfiles1").plupload({ type: 1, url: "",//地址 filters: { max_file_count: 1 }, uploadInfo: { required: true, container: "" }, multipart_params: { }, initLoad: function (up) { }, //每个文件上传成功触发回调函数 fileUploaded: function (file, response) { }, //每个文件删除以后触发回调函数 fileRemoved: function (file) { }, //plupload 执行全部的上传事件后触发该函数,只触发一次 uploadComplete: function (up, files) { } });
修改插件,你必须知道的单图上传和多图上传在plupload中事件的执行顺序
上一篇: audio的兼容和使用
下一篇: 移动端弹框组件mDialog