<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .a-upload { padding: 4px 10px; height: 20px; line-height: 20px; position: relative; cursor: pointer; color: #888; background: #fafafa; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; display: inline-block; *display: inline; *zoom: 1 } .a-upload input { position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0; filter: alpha(opacity=0); cursor: pointer } .a-upload:hover { color: #444; background: #eee; border-color: #ccc; text-decoration: none } .test{ width: 100px; height: 100px; background:rgba(0,0,0,0.2); filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000); } .upload{ width: 100px; height: 40px; padding: 5px 10px; position: relative; overflow: hidden; background: red; cursor: pointer; border-radius: 5px; line-height: 40px; text-align: center; } .upload:hover{ background: firebrick; } .upload input{ font-size: 200px; position: absolute; opacity: 0; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); top: 0; right: 0; cursor: pointer; } </style> </head> <body> <div class="test"> 豆腐干豆腐 </div> <div class="a-upload"> <input type="file" name="" id="">点击这里上传文件 </div> <div class="upload"> <input type="file" id="img" multiple> 上传图片 </div> <div id="imgBox"> </div> </body> <script> var imgEle=document.getElementById("img"); var arr=[]; imgEle.addEventListener("change",function (e) { // 获取文件列表对象 var files = e.target.files || e.dataTransfer.files; for (var i = 0, file; file = files[i]; i++) { if (file.type.indexOf("image") == 0) { if (file.size >= 512000) { alert('您这张"'+ file.name +'"图片大小过大，应小于500k'); } else { var reader = new FileReader(); reader.onload = function(e) { var imgB=document.getElementById("imgBox"); var imgEle=document.createElement("img"); imgEle.setAttribute("src",e.target.result); imgB.appendChild(imgEle); }; reader.readAsDataURL(file); arr.push(file); } } else { alert('文件"' + file.name + '"不是图片。'); } } console.log(arr); }) // 上传 var xhr = new XMLHttpRequest(); // 文件上传成功或是失败 xhr.onreadystatechange = function(e) { if (xhr.readyState == 4) { if (xhr.status == 200) { // 成功 } } else { // 失败 } } }; // 开始上传 xhr.open("POST", url, true); xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); var fd = new FormData(); fd.append("myPhoto", files[0]); //执行发送 xhr.send(fd); </script> </html>