如何预览文件，然后单击按钮上传并保存多个文件

问题描述：

我正在测试下面的代码，这是我在上载多个图像之前预览图像文件的过程，但我遇到了一些问题以便保存脚本上传文件。大部分的代码是从这个网站上产生的：https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications 如何预览文件，然后单击按钮上传并保存多个文件

在这个上传脚本上花费了两个小时的时间后，我无法使JavaScript函数FileUpload（）工作。我不是这方面的专家，所以我很好奇问，如果有人能给我一些线索，说明可能导致代码没有上传文件。指针：我使用IE11和Firefox v32。该网站还提供了一个说明，见下文;但我不知道如何去做这些修改以将文件发送为blob：注意：上述示例中的非标准sendAsBinary方法在Gecko 31（Firefox 31/Thunderbird 31/SeaMonkey 2.28）中被视为弃用;将很快被移除。标准发送（Blob数据）方法可以用来代替。

HTML/JavaScript的

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>test file upload</title> 
<link rel="stylesheet" href="style.css" type="text/css" media="all" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" charset="utf-8"></script> 

</head> 

<body> 

    <h2><strong>Multiple Images Upload</strong></h2> 
    <p>Upload only files with: .jpeg, .jpg, .gif &amp; .png. extensions.</p> 
    <br> 
    <div class="row"><!-- Start button-progress row --> 
     <form name="upl-form" method="post" enctype="multipart/form-data" > 
      <input type="file" id="myfile" name="myfile" accept="image/*" multiple onchange="showFiles(this.files)"/> 
      <button id="upl"> <strong>upload</strong></button> 
      <button id="rem"> <strong>Remove</strong></button> 
     </form> 
    </div> 
    <div class="clear-both"></div> 
    <div id="row"> 
     <p id="upl_msg"></p><!-- messages --> 
     <div class="progress"></div><!-- progress --> 
    </div> 
    <div class="clear-both"></div> 
    <div class="row"> 
     <ul id="preview"> 
      <!-- preview the selected files here --> 
     </ul> 
    </div> 

<script> 

    // set form upload/reset buttons handle events 
    var form = document.forms.namedItem("upl-form"); 

    // reset - button 
    form.addEventListener('rem', function(ev) { 
    this.form.reset(); 
     ev.preventDefault(); 
    }, false); 

    // upload - button 
    var upl = document.getElementById("upl"), 
     obj = { 
      handleEvent: function() { 
       sendFiles(); 
      } 
     }; 

    upl.addEventListener("click", obj, function(e) { 
     e.preventDefault(); 
    }, false); 


    // preview image files 
    function showFiles(files) 
    { 
     // get the preview area ID 
     preview = document.getElementById("preview"); 
     preview.setAttribute("class", "small-block"); 

     // loop through the selected files source 
     for (var i = 0; i < files.length; i++) 
     { 
      // seperate the files and check the allowed file types 
      var file = files[i]; 
      var imageType = /image.*/; 

      if (!file.type.match(imageType)) 
      { 
       continue; 
      } 

      // for previewing, create the image elememt 
      var img = document.createElement("img"); 
      img.setAttribute("class", "th qd-thumb"); 
      img.classList.add("obj"); 
      img.file = file; 
      preview.appendChild(img); 

      // start the file reader 
      var reader = new FileReader(); 
      reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img); 
      reader.readAsDataURL(file);          
     } 
    } 

    function sendFiles() { 
     var imgs = document.querySelectorAll(".obj"); 

     for (var i = 0; i < imgs.length; i++) { 
     new FileUpload(imgs[i], imgs[i].file); 
     } 
    } 

    function FileUpload(img, file) { 
     var reader = new FileReader(); 
     this.ctrl = createThrobber(img); 
     var xhr = new XMLHttpRequest(); 
     this.xhr = xhr; 

     var self = this; 
     this.xhr.upload.addEventListener("progress", function(e) { 
      if (e.lengthComputable) { 
       var percentage = Math.round((e.loaded * 100)/e.total); 
       self.ctrl.update(percentage); 
      } 
      }, false); 

     xhr.upload.addEventListener("load", function(e){ 
       self.ctrl.update(100); 
       var canvas = self.ctrl.ctx.canvas; 
       canvas.parentNode.removeChild(canvas); 
      }, false); 
     xhr.open("POST", "http://localhost/test.com/upload.php"); 
     xhr.overrideMimeType('text/plain; charset=x-user-defined-binary'); 
     reader.onload = function(evt) { 
     xhr.sendAsBinary(evt.target.result); 
     }; 
     reader.readAsBinaryString(file); 
    } 

</script> 

</body> 
</html> 

<?php 
if (isset($_FILES['myFile'])) { 
    // Example: 
    move_uploaded_file($_FILES['myfile']['tmp_name'], "uploads/" . $_FILES['myfile']['name']); 
    exit; 
}

答

一个很好的jQuery的文件上传插件可用

为什么你必须把它从从头开始写？有一个很好的jQuery基于HTML5的插件可用。

http://blueimp.github.io/jQuery-File-Upload/

它也有回落非HTML5浏览器和JS禁用浏览器的选项。其作品有很多，如PHP，Python和Ruby on Rails的，Java和Node.js的等服务器端平台...

您也可以找到一个WordPress插件实现相同的

https://wordpress.org/plugins/jquery-html5-file-upload/

http://*.com/questions/25129955/multiple-image-preview-before-upload/25130412#25130412 – 2014-10-08 20:32:40

如何预览文件，然后单击按钮上传并保存多个文件

相关推荐