jQuery-WEUI（jqweui）的Uploader图片上传方法2.0

之前写了一篇关于用jqweui.cn库中的文件上传（uploader）+图片预览（Gallery）组合实现图片上传的方法，不过只能实现简单的将待上传图片插入到待上传图片预览列表和实现预览、删除功能。但是还没法实现真正的上传方法。

由于公司业务需求，就花了点时间重新对图片上传方法进行修改封装成插件。可以配合jquery-2.1.4.js，weui.min.js，jquery-weui.js实现真正的图片上传功能，并且可以实现单纯的图片显示，图片预览，删除（同时支持删除服务器上的图片）。

插件的具体代码已封装成jquery-weui.uploader.js文件，代码在文末附件中，欢迎大家下载探讨。

话不多说，看代码：

 

前端HTML代码:

<div id="attachmnet">
    <div class="weui-cells__title">附件信息</div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <!--weui-uploader 照片上传功能-->
                <div class="weui-uploader" id="ImgUploader">
                    <div class="weui-uploader__hd">
                        <p class="weui-uploader__title">上传附加照片</p>
                        <div class="weui-uploader__info" data-total="3" data-val="0">0/3</div>
                    </div>
                    <div class="weui-uploader__bd">
                        <ul class="weui-uploader__files"></ul>
                        <div class="weui-uploader__input-box">
                            <input class="weui-uploader__input" type="file" accept="image/*" multiple size="3">
                        </div>
                    </div>
                </div>
                <!--weui-uploader 照片上传功能 END-->
            </div>
        </div>
    </div>
</div>
<div id="gallery" class="weui-gallery">
    <span class="weui-gallery__img" style="background-image: url(xxx);"></span>
    <div class="weui-gallery__opr">
        <a href="javascript:" class="weui-gallery__del">
            <i class="weui-icon-delete weui-icon_gallery-delete"></i>
        </a>
    </div>
</div>

 

HTML部分代码和原来保持一致，唯一的区别是去除了部分元素的id,JS代码中不再使用元素id来进行处理。

JS代码：

对上传控件进行初始化，记住：要初始化的控件必须是 <div class="weui-uploader"> 元素，否则无法初始化成功。此部分HTML代码请参照http://jqweui.com/components#uploader

$("#ImgUploader").uploader({
    model: "normal", // normal模式支持上传和删除，show模式仅支持预览
    url: "",
    data: {
        'id': "0001",
    },
    maxCount: 3,// 最大上传数量
    initCount: 0,//初始上传数量
    maxSize: 1024 * 1024,// 图片最大宽度,1024KB，也就是 1MB
    maxWidth: 300,//预览区最大宽度,默认300
    gallery: $("#gallery"),
    success: null,
    deletefunc: function (fileId) {
        deleteAttachmnet(fileId);
    }
});

现在我们来一一解释一下uploader控件初始化时的参数含义：

名称	类型	描述	默认值
model	string	上传控件的模式，normal模式支持上传和删除，show模式仅支持预览	normal
url	string	服务器上传地址，url和success不能同时设置，只能选其一，当两者都为空时不执行上传功能
data	object	上传图片到服务器时附带的参数
maxCount	number	最大允许上传图片数量，超过数量后，	true
initCount	number	初始化时的已上传数量，默认为0，初始化时可不设置该参数	0
maxSize	number	图片上传时的最大宽度,格式：1024*1024，表示1024KB，也就是 1MB，因为手机拍照图片过大，所以需要进行压缩	默认1024*1024
maxWidth	number	预览区图片显示的最大宽度	默认300px
gallery	object	全屏预览的控件元素对象。格式：$("#gallery")	$("#gallery")
success	number	当选择图片并完成插入图片到上传区时执行的回调函数方法，可用于执行上传，调用时会传入选中文件的url和文件名	回调返回的参数格式： {file: base64格式,name: filename}
deletefunc	Date	当全屏预览时，点击删除事件后执行的回掉方法，通过该回调方法可以执行删除服务器上的图片。调用时会传入该图片的id

 

当初始化时设置的模式为“show”时，可以通过调用setValues(data)方法来完成图片的赋值。data为数组对象，其中包含

code：图片附件id；

src：base64格式的图片地址；

name：图片的名称；

举例：

var data=[
 {code:001,src:"base64:fsfsgsgs",name""图片1"},
 {code:002,src:"base64:fsfsgsgs",name""图片2"},
 {code:003,src:"base64:fsfsgsgs",name""图片3"}
]
$("#ImgUploader").uploader.setValues(data);

其实，这个版本还有很多改进空间，目前只支持了base64格式，还可以再进行优化，允许支持base64和文件流上传。以后有空了再慢慢研究，如果有大神有更多想法的，可以留言互相交流，一起完善这个插件。

文末附上代码及示例demo，有需要的可以下载：

jqweui图片上传插件uploader下载地址

新版图片上传组件下载地址：

jqweui图片上传插件jquery-weui.uploader.js