使用weiui實現圖片上傳(該方法不能實現圖片多選上傳)
阿新 • • 發佈:2021-06-30
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事件,從而導致圖片上傳失敗