使用weiui实现图片上传（该方法不能实现图片多选上传）

weui-gallery 是存放图片的

<div class="weui-gallery" id="gallery">
                <span class="weui-gallery__img" id="galleryImg"></span>
                <div class="weui-gallery__opr">
                    <a href="javascript:" class="weui-gallery__del">
                        <i class="weui-icon-delete weui-icon_gallery-delete" style="margin-bottom: 50px"></i>
                    </a>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <div class="weui-uploader">
                        <div class="weui-uploader__hd">
                            <p class="weui-uploader__title">请添加异常情况图片</p>
                        </div>
                        <div class="weui-uploader__bd">
                            <ul class="weui-uploader__files" id="uploaderFiles"></ul>
                            <div class="weui-uploader__input-box">
                                <input id="uploaderInput" class="weui-uploader__input zjxfjs_file" type="file"
                                       accept="image/*" multiple="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

　　JS代码

var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>',
        $gallery = $("#gallery"),
        $galleryImg = $("#galleryImg"),
        $uploaderInput = $("#uploaderInput"),
        $uploaderFiles = $("#uploaderFiles");
    $uploaderInput.on("change", function (e) {
        var src, url = window.URL || window.webkitURL || window.mozURL,
            files = e.target.files;
        var length = fileArr.length;
        for (var i = 0, len = files.length; i < len; ++i) {
            var file = files[i];
            fileArr.push(file);
            if (url) {
                src = url.createObjectURL(file);
            } else {
                src = e.target.result;
            }
            $uploaderFiles.append($(tmpl.replace('#url#', src)));
        }
    });

    var index; //第几张图片
    $uploaderFiles.on("click", "li", function () {
        index = $(this).index();
        $galleryImg.attr("style", this.getAttribute("style"));
        $gallery.fadeIn(100);
    });
    $gallery.on("click", function () {
        $gallery.fadeOut(100);
    });
    //删除图片
    $(".weui-gallery__del").click(function () {
        $uploaderFiles.find("li").eq(index).remove();
        fileArr.splice(index, 1);
        $("#uploaderInput").val('');
    });

　　添加$("#uploaderInput").val(''); 是重置input的值

　　

1.我们在上传图片时，监听的是$(#"uploaderInput")的change事件；

2.change事件会在内容改变且失去焦点时触发；

3.第二次上传的图片还是上一次的图片的话，就不会触发这个onchange事件，从而导致图片上传失败