1. 程式人生 > 其它 >使用weiui實現圖片上傳(該方法不能實現圖片多選上傳)

使用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事件,從而導致圖片上傳失敗