如何首先預覽文件並單擊按鈕以上傳和保存多個文件

Question

我正在下面測試此代碼，以便在上傳多張圖像之前預覽圖像文件，但是在獲取腳本來保存和上傳文件時遇到了一些問題。 大多數代碼是從以下網站生成的： 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）開始就被棄用。即將被移除。 可以使用標准的send（Blob data）方法。

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;
}

Answer 1

一個不錯的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/

如何首先預覽文件並單擊按鈕以上傳和保存多個文件

問題描述

1 個解決方案

解決方案1
0 2014-10-08 19:16:48

如何首先預覽文件並單擊按鈕以上傳和保存多個文件

問題描述

1 個解決方案

解決方案1 0 2014-10-08 19:16:48

解決方案1
0 2014-10-08 19:16:48