关于图片上传实现方案
一、实现方案（一）
1、通过window.URL.createObjectURL（兼容性较好），实现起来稍微复杂些。
<!DOCTYPE html> <html> <head> <title>uploadImg</title> </head> <style type="text/css"> #container{ display: flex; flex-direction: column; align-items: center; } .upload{ width: 400px; height: 30px; display: inline-block; line-height: 30px; background: #f0f0f0; border: 1px solid #ccc; position: relative; text-align: center; } #upload{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer } #postImg{ margin-top: 20px; } #imgBox { overflow: hidden; } #imgBox .imgContainer{ float: left; width: 32%; margin-left: 5px; margin-top: 20px; position: relative; } #imgBox .imgContainer .delete{ position: absolute; left: 0px; bottom: 0px; height: 30px; line-height: 30px; background: rgba(25,25,25,.5); margin: 0; width: 100%; text-align: center; color: #f0f0f0; cursor: pointer; display: none; } #imgBox .imgContainer:hover .delete{ display: block; } #imgBox img{ width: 100%; height: 150px; vertical-align: bottom; } #zoomBox{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(23,23,23,.7); z-index: 1000; display: flex; align-items: center; justify-content: center; flex-direction: column; } #zoomBox img{ max-width:100%; z-index: 1001; } #zoomBox p{ color: #fff; cursor: pointer; z-index: 1001; } </style> <body> <form id="container"> <span class="upload">点击上传<input id="upload" type="file" multiple accept="image/png,image/jpg,image/gif,image/JPEG"></span> <div id="imgBox"></div> <input id="postImg" type="button" name="" value="上传"> </form> </body> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script type="text/javascript"> var imgSrc = []; var imgFile = []; var imgName = []; //监听选择图片的change事件 $("#upload").on("change",function(){ getImgObj() }) //获取图片相关信息 function getImgObj(){ var imgObj = $("#upload")[0].files; for(var i=0; i<imgObj.length; i++){ var imgSrcI = getUrl(imgObj[i]) imgSrc.push(imgSrcI) imgFile.push(imgObj[i]) imgName.push(imgObj[i].name) } addNewContent() } //获取图片URL function getUrl(file){ var url = null; if (window.createObjectURL != undefined) { url = window.createObjectURL(file); } else if (window.URL != undefined) { url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { url = window.webkitURL.createObjectURL(file); } return url; } //添加dom function addNewContent(){ $("#imgBox").html("") for(var i =0; i<imgSrc.length; i++){ var oldObj = $("#imgBox").html() $("#imgBox").html(oldObj + '<div class="imgContainer"><img onclick="zoom(this,'+i+')" title=' + imgName[i] + ' alt=' + imgName[i] + ' src=' + imgSrc[i] + '><p class="delete" onclick="Delete(this,'+i+')">删除</p></div>'); } } //删除 function Delete(obj,index){ imgSrc.splice(index, 1); imgFile.splice(index, 1); imgName.splice(index, 1); addNewContent() } //放大 function zoom(obj,index){ var html = "<div id='zoomBox'><img src=" + imgSrc[index] + "><p onclick='closeZoom()'>关闭</p></div>" $("body").append(html) } //关闭 function closeZoom(){ $("#zoomBox").remove() } //提交 $("#postImg").click(function(){ var data = new FormData() data.append("imgFile",imgFile) console.log(data) return false }) </script> </html>
2、通过原生js实现预览
<!DOCTYPE html> <html> <head> <title>图片上传</title> </head> <body> <form id="imgForm"> <div id="box"></div> <input id="imgInput" type="file" name="" value="上传图片" multiple> </form> </body> <script type="text/javascript"> var img = document.getElementById("imgInput") var imgArr = []; var imgUrl = []; var imgobj = []; img.onchange=function(){ var imgs = img.files for(var i = 0; i<imgs.length; i++){ imgArr.push(imgs[i]) } //通过window对象下的URL相关属性 var createObjUrl = function(blob){ return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob); } for(var i in imgArr){ imgUrl.push(createObjUrl(imgArr[i])) var imgObj = new Image() imgObj.src = imgUrl[i] document.getElementById("box").appendChild(imgObj) } } </script> </html>
3、原理
1、浏览器提供的window.URL.createObjectURL(参数) 参数部分为图片对象。
2、通过input[file]监听onchange事件的触发，从而获取files对象。并通过便利files对象（一个类似数组），将图片对象过滤出来。
二、实现方案（二）
1、通过FileReader对象（兼容性待考究）
<!DOCTYPE html> <html> <head> <title>图片上传之FileReader</title> </head> <style type="text/css"> #box{ width: 200px; } #box img{ max-width: 100%; } </style> <body> <input type="file" name="" id="imgBtn" multiple> <div id="box"></div> </body> <script type="text/javascript"> var imgBtn = document.getElementById('imgBtn') imgBtn.onchange = function(){ var imgFile = imgBtn.files[0]; var imgObj = new FileReader() imgObj.onload = function(imgFile){ var prevImg = new Image() prevImg.src = imgFile.target.result; document.getElementById('box').appendChild(prevImg) } imgObj.readAsDataURL(imgFile) } </script> </html>
