html5 實現多文件上傳和預覽效果

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="UTF-8" /> 
  <title>showImages</title> 
  <style type="text/css"> .float{ float:left; width : 200px; height: 200px; overflow: hidden; border: 1px solid #CCCCCC; border-radius: 10px; padding: 5px; margin: 5px; } img{ position: relative; } .result{ width: 200px; height: 200px; text-align: center; box-sizing: border-box; } #file_input{ display: none; } .delete{ width: 200px; height:200px; position: absolute; text-align: center; line-height: 200px; z-index: 10; font-size: 30px; background-color: rgba(255,255,255,0.8); color: #777; opacity: 0; transition-duration: :0.7s; -webkit-transition-duration: 0.7s; } .delete:hover{ cursor: pointer; opacity: 1; } </style> 
 </head> 
 <body> 
  <div class="container"> 
   <label>請選擇一個圖像文件：</label> 
   <button id="select">(重新)選擇圖片</button> 
   <button id="add">(追加)圖片</button> 
   <input type="file" id="file_input" multiple="" /> 
   <!--用input標簽並選擇type=file，記得帶上multiple，不然就只能單選圖片了--> 
   <button id="submit">提交</button> 
  </div>  
 </body>
</html>
<script src = "http://libs.baidu.com/jquery/2.0.0/jquery.min.js" > </script> 
  <script type="text/javascript "> </script>

window.onload = function(){ var input = document.getElementById("file_input "); var result; var dataArr = []; // 儲存所選圖片的結果(文件名和base64數據) var fd; //FormData方式發送請求 var oSelect = document.getElementById("select "); var oAdd = document.getElementById("add "); var oSubmit = document.getElementById("submit "); var oInput = document.getElementById("file_input "); if(typeof FileReader==='undefined'){ alert("抱歉，你的瀏覽器不支持FileReader "); input.setAttribute('disabled','disabled'); }else{ input.addEventListener('change',readFile,false); }　　　　　//handler function readFile(){ fd = new FormData(); var iLen = this.files.length; var index = 0; for(var i=0;i<ilen;i++){ if="" (!input['value'].match(="" .jpg|.gif|.png|.jpeg|.bmp="" i)){　　="" 判斷上傳文件格式="" return="" alert("上傳的圖片格式不正確，請重新選擇");="" }="" var="" reader="new" filereader();="" reader.index="i;" fd.append(i,this.files[i]);="" reader.readasdataurl(this.files[i]);="" 轉成base64="" reader.filename="this.files[i].name;" reader.onload="function(e){" imgmsg="{" name="" :="" this.filename,="" 獲取文件名="" base64="" this.result="" reader.readasdataurl方法執行完后，base64數據儲存在reader.result里="" dataarr.push(imgmsg);="" result="

delete

'; var div = document.createElement('div'); div.innerHTML = result; div['className'] = 'float'; div['index'] = index; document.getElementsByTagName('body')[0].appendChild(div); 　　//插入dom樹 var img = div.getElementsByTagName('img')[0]; img.onload = function(){ var nowHeight = ReSizePic(this); //設置圖片大小 this.parentNode.style.display = 'block'; var oParent = this.parentNode; if(nowHeight){ oParent.style.paddingTop = (oParent.offsetHeight - nowHeight)/2 + 'px'; } } div.onclick = function(){ this.remove(); // 在頁面中刪除該圖片元素 delete dataArr[this.index]; // 刪除dataArr對應的數據 } index++; } } } function send(){ var submitArr = []; for (var i = 0; i < dataArr.length; i++) { if (dataArr[i]) { submitArr.push(dataArr[i]); } } // console.log('提交的數據：'+JSON.stringify(submitArr)) $.ajax({ url : 'http://123.206.89.242:9999', type : 'post', data : JSON.stringify(submitArr), dataType: 'json', //processData: false, 用FormData傳fd時需有這兩項 //contentType: false, success : function(data){ console.log('返回的數據：'+JSON.stringify(data)) 　} }) } oSelect.onclick=function(){ oInput.value = ""; // 先將oInput值清空，否則選擇圖片與上次相同時change事件不會觸發 //清空已選圖片 $('.float').remove(); dataArr = []; index = 0; oInput.click(); } oAdd.onclick=function(){ oInput.value = ""; // 先將oInput值清空，否則選擇圖片與上次相同時change事件不會觸發 oInput.click(); } oSubmit.onclick=function(){ if(!dataArr.length){ return alert('請先選擇文件'); } send(); } } /* 用ajax發送fd參數時要告訴jQuery不要去處理發送的數據，不要去設置Content-Type請求頭才可以發送成功，否則會報“Illegal invocation”的錯誤，也就是非法調用，所以要加上“processData: false,contentType: false,” * */ function ReSizePic(ThisPic) { var RePicWidth = 200; //這里修改為您想顯示的寬度值 var TrueWidth = ThisPic.width; //圖片實際寬度 var TrueHeight = ThisPic.height; //圖片實際高度 if(TrueWidth>TrueHeight){ //寬大於高 var reWidth = RePicWidth; ThisPic.width = reWidth; //垂直居中 var nowHeight = TrueHeight * (reWidth/TrueWidth); return nowHeight; //將圖片修改后的高度返回，供垂直居中用 }else{ //寬小於高 var reHeight = RePicWidth; ThisPic.height = reHeight; } } "

html5 實現多文件上傳和預覽效果

免責聲明！