移动端图片上传插件(基于plupload的二次封装)

2018-03-25 散崖 8853人已阅读

项目的需求是,客户端可以上传图片,后端需要审核图片,图片如果上传失败需要重新上传进行审核!直接先看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中事件的执行顺序

事件图片

交换友情链接