展示效果
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery-3.4.1.js"></script> <script type="text/javascript"> var all_picW = "100px";//预览的宽度 var all_picH = "100px";//预览的高度 function multiImagePreview(avalue) { var upMultilImagesObj = document.getElementById("upMultilImages"); var picViewsBox = document.getElementById("picViewsBox"); console.log(); picViewsBox.innerHTML = ""; var fileList = upMultilImagesObj.files; if (fileList.length > 0) { $(".imgAbstract").css("display", "none"); } for (var i = 0; i < fileList.length; i++) { picViewsBox.innerHTML += "<div style='float:left' > <img id='img" + i + "' /> </div>"; var picjPreviewInfo = document.getElementById("img" + i); if (upMultilImagesObj.files && upMultilImagesObj.files[i]) { //火狐 picjPreviewInfo.style.display = 'block'; picjPreviewInfo.style.width = all_picW; picjPreviewInfo.style.height = all_picH; //picjPreviewInfo.src = upMultilImagesObj.files[0].getAsDataURL(); //火狐7+版本,用不了getAsDataURL() picjPreviewInfo.src = window.URL.createObjectURL(upMultilImagesObj.files[i]); console.log(picjPreviewInfo); } else { //IE upMultilImagesObj.select(); var picTagSrc = document.selection.createRange().text; alert(picTagSrc); var localImagId = document.getElementById("img" + i); //设置初始大小 localImagId.style.width = all_picW; localImagId.style.height = all_picH; //图片异常捕捉 try { localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = picTagSrc; } catch (e) { alert("图片格式不正确!"); return false; } picjPreviewInfo.style.display = 'none'; document.selection.empty(); } } return true; } </script> </head> <body> <div class="editor-field"> <input type="file" name="myFile" id="upMultilImages" multiple="multiple" onchange="javascript:multiImagePreview();" accept="image/*" /> <div id="picViewsBox"></div> <div class="clear"></div> <span style="display:none;color:red;" class="imgAbstract"></span> </div> <div id="picViewsBox"></div> </body> </html>