html5 文件上传预览

最新推荐文章于 2024-09-23 11:37:04 发布
cch_cch
最新推荐文章于 2024-09-23 11:37:04 发布
阅读量466
点赞数
分类专栏： web
web 专栏收录该内容
11 篇文章 0 订阅
订阅专栏
 
 <form action= 
 "upload.php" 
  method= 
 "post" 
  enctype= 
 "multipart/form-data" 
 > 
 
 UPLOAD USER-ICON:<input name= 
 "icon" 
  id= 
 "icon" 
  type= 
 "file" 
  placeholder= 
 "请上传PNG格式的图像(大小在1M之内)" 
 /><br/> 
 
 <input type= 
 "submit" 
  value= 
 "上传" 
 /> 
 
 </form> 

 <section id= 
 "main-content" 
 > 
 
 <h2>文件上传(可预览)</h2> 
 
 <p> 
 
 浏览和上传多个文件在一个去按住Ctrl(Windows、Linux)或命令(Mac)当点击他们的文件对话框,或拖放文件。上传文件的信息将是下面列出的。注意:Safari似乎无法读出任何信息关于实际的文件                </p> 
 
 <h3>选择图片(>=1)</h3> 
 
 <p> 
 
 <input id= 
 "files-upload" 
  type= 
 "file"  
  multiple= 
 "multiple" 
 /> 
 
 <!-- multiple= 
 "multiple" 
  --> 
 
 </p> 
 
 <p id= 
 "drop-area" 
 > 
 
 <span  
 class 
 = 
 "drop-instructions" 
 >投放文件到这里</span> 
 
 <span  
 class 
 = 
 "drop-over" 
 >拖动文件到此处!</span> 
 
 </p> 
 
 <ul id= 
 "file-list" 
 > 
 
 <li  
 class 
 = 
 "no-items" 
 >(没有上传文件)</li> 
 
 </ul> 
 
 <script> 
 
 ( 
 function 
  () { 
 
 var 
  filesUpload = document.getElementById( 
 "files-upload" 
 ), 
 
 dropArea = document.getElementById( 
 "drop-area" 
 ), 
 
 fileList = document.getElementById( 
 "file-list" 
 ); 
 
 function 
  uploadFile (file) { 
 
 var 
  li = document.createElement( 
 "li" 
 ), 
 
 div = document.createElement( 
 "div" 
 ), 
 
 img, 
 
 progressBarContainer = document.createElement( 
 "div" 
 ), 
 
 progressBar = document.createElement( 
 "div" 
 ), 
 
 reader, 
 
 xhr, 
 
 fileInfo; 
 
 li.appendChild(div); 
 
 progressBarContainer.className =  
 "progress-bar-container" 
 ; 
 
 progressBar.className =  
 "progress-bar" 
 ; 
 
 progressBarContainer.appendChild(progressBar); 
 
 li.appendChild(progressBarContainer); 
 
 /* 
 
 If the file is an image and the web browser supports FileReader, 
 
 present a preview in the file list 
 
 */ 
 
 if 
  ( 
 typeof 
  FileReader !==  
 "undefined" 
  && (/image/i).test(file.type)) { 
 
 img = document.createElement( 
 "img" 
 ); 
 
 li.appendChild(img); 
 
 reader =  
 new 
  FileReader(); 
 
 reader.onload = ( 
 function 
  (theImg) { 
 
 return 
  function 
  (evt) { 
 
 theImg.src = evt.target.result; 
 
 }; 
 
 }(img)); 
 
 reader.readAsDataURL(file); 
 
 } 
 
 // Uploading - for Firefox, Google Chrome and Safari 
 
 xhr =  
 new 
  XMLHttpRequest(); 
 
 // Update progress bar 
 
 xhr.upload.addEventListener( 
 "progress" 
 ,  
 function 
  (evt) { 
 
 if 
  (evt.lengthComputable) { 
 
 progressBar.style.width = (evt.loaded / evt.total) * 100 +  
 "%" 
 ; 
 
 } 
 
 else 
  { 
 
 // No data to calculate on 
 
 } 
 
 },  
 false 
 ); 
 
 // File uploaded 
 
 xhr.addEventListener( 
 "load" 
 ,  
 function 
  () { 
 
 progressBarContainer.className +=  
 " uploaded" 
 ; 
 
 progressBar.innerHTML =  
 "Uploaded!" 
 ; 
 
 },  
 false 
 ); 
 
 xhr.open( 
 "post" 
 ,  
 "upload/upload.php" 
 ,  
 true 
 ); 
 
 // Set appropriate headers 
 
 xhr.setRequestHeader( 
 "Content-Type" 
 ,  
 "multipart/form-data" 
 ); 
 
 xhr.setRequestHeader( 
 "X-File-Name" 
 , file.name); 
 
 xhr.setRequestHeader( 
 "X-File-Size" 
 , file.size); 
 
 xhr.setRequestHeader( 
 "X-File-Type" 
 , file.type); 

 // Send the file (doh) 
 
 xhr.send(file); 
 
 // Present file info and append it to the list of files 
 
 fileInfo =  
 "<div><strong>Name:</strong> " 
  + file.name +  
 "</div>" 
 ; 
 
 fileInfo +=  
 "<div><strong>Size:</strong> " 
  + parseInt(file.size / 1024, 10) +  
 " kb</div>" 
 ; 
 
 fileInfo +=  
 "<div><strong>Type:</strong> " 
  + file.type +  
 "</div>" 
 ; 
 
 div.innerHTML = fileInfo; 
 
 fileList.appendChild(li); 
 
 } 
 
 function 
  traverseFiles (files) { 
 
 if 
  ( 
 typeof 
  files !==  
 "undefined" 
 ) { 
 
 for 
  ( 
 var 
  i=0, l=files.length; i<l; i++) { 
 
 uploadFile(files[i]); 
 
 } 
 
 } 
 
 else 
  { 
 
 fileList.innerHTML =  
 "No support for the File API in this web browser" 
 ; 
 
 }    
 
 } 
 
 filesUpload.addEventListener( 
 "change" 
 ,  
 function 
  () { 
 
 traverseFiles( 
 this 
 .files); 
 
 },  
 false 
 ); 
 
 dropArea.addEventListener( 
 "dragleave" 
 ,  
 function 
  (evt) { 
 
 var 
  target = evt.target; 
 
 if 
  (target && target === dropArea) { 
 
 this 
 .className =  
 "" 
 ; 
 
 } 
 
 evt.preventDefault(); 
 
 evt.stopPropagation(); 
 
 },  
 false 
 ); 
 
 dropArea.addEventListener( 
 "dragenter" 
 ,  
 function 
  (evt) { 
 
 this 
 .className =  
 "over" 
 ; 
 
 evt.preventDefault(); 
 
 evt.stopPropagation(); 
 
 },  
 false 
 ); 
 
 dropArea.addEventListener( 
 "dragover" 
 ,  
 function 
  (evt) { 
 
 evt.preventDefault(); 
 
 evt.stopPropagation(); 
 
 },  
 false 
 ); 
 
 dropArea.addEventListener( 
 "drop" 
 ,  
 function 
  (evt) { 
 
 traverseFiles(evt.dataTransfer.files); 
 
 this 
 .className =  
 "" 
 ; 
 
 evt.preventDefault(); 
 
 evt.stopPropagation(); 
 
 },  
 false 
 );                                       
 
 })(); 
 
 </script> 
 
 </section>