如果頁面中有使用LayUi框架需要上傳多張圖片時需要刪除form 中 class=“layui-form” ，不然上傳不了多張圖片

<style>.imageDiv {display:inline-block;width:100px;height:100px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:1px dashed darkgray;background:#f8f8f8;position:relative;overflow:hidden;margin:10px}.cover {position:absolute;z-index:1;top:0;left:0;width:100px;height:100px;background-color:rgba(0,0,0,.3);display:none;line-height:125px;text-align:center;cursor:pointer;}.cover .delbtn {color:red;font-size:10px;}.imageDiv:hover .cover {display:block;}.addImages {display:inline-block;width:100px;height:100px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:1px dashed darkgray;background:#f8f8f8;position:relative;overflow:hidden;margin:10px;}.text-detail {margin-top:10px;text-align:center;}.text-detail span {font-size:40px;}.file {position:absolute;top:0;left:0;width:100px;height:100px;opacity:0;}
</style><div style="width: 70%;margin: 0 auto"><div id="Pic_pass"><p style="font-weight: bold;">請上傳圖片</p><p><span style="color: red">注：每張圖片大小不可超過4M，一次最多可以上傳4張,多張上傳時必須按住ctrl選中</span></p><div class="picDiv"><div class="addImages"><input type="file" class="file" name="file[]" id="fileInput" multiple="multiple" accept="image/png, image/jpeg, image/gif, image/jpg"><div class="text-detail"><span>+</span><p>點擊上傳</p></div></div></div></div><div class="msg" style="display: none;"></div>
</div><script>//圖片上傳預覽功能var userAgent = navigator.userAgent; //用于判斷瀏覽器類型$(".file").change(function() {//獲取選擇圖片的對象var docObj = $(this)[0];var picDiv = $(this).parents(".picDiv");//得到所有的圖片文件var fileList = docObj.files;//循環遍歷for (var i = 0; i < fileList.length; i++) {//動態添加html元素var picHtml = "<div class='imageDiv' > <img id='img" + fileList[i].name + "' /> <div class='cover'><i class='delbtn'>刪除</i></div></div>";// console.log(picHtml);picDiv.prepend(picHtml);//獲取圖片imgi的對象var imgObjPreview = document.getElementById("img" + fileList[i].name);if (fileList && fileList[i]) {//圖片屬性imgObjPreview.style.display = 'block';imgObjPreview.style.width = '100px';imgObjPreview.style.height = '100px';//imgObjPreview.src = docObj.files[0].getAsDataURL();//火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要以下方式if (userAgent.indexOf('MSIE') == -1) {//IE以外瀏覽器imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); //獲取上傳圖片文件的物理路徑;// console.log(imgObjPreview.src);// var msgHtml = '<input type="file" id="fileInput" multiple/>';} else {//IE瀏覽器if (docObj.value.indexOf(",") != -1) {var srcArr = docObj.value.split(",");imgObjPreview.src = srcArr[i];} else {imgObjPreview.src = docObj.value;}}}}/*刪除功能*/$(".delbtn").click(function() {var _this = $(this);_this.parents(".imageDiv").remove();});});
</script>

刪除圖片：

總結

以上是生活随笔為你收集整理的jquery实现图片上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。