Question

我正在测试下面的代码，我在上传多个图像之前预览了图像文件，但是我遇到了一些问题，要让脚本保存并上传文件。大多数代码都是通过以下网站生成的：https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

在这个上传脚本上花了两个小时后，我无法使用JavaScript函数FileUpload（）。我不是这方面的专家，所以我很想知道是否有人可以告诉我一些可能导致代码无法上传文件的线索。指针：我使用的是IE11和Firefox v32。该网站还提供了一个说明，见下文;但我不知道如何进行更改以将文件作为blob发送：注意：从Gecko 31（Firefox 31 / Thunderbird 31 / SeaMonkey 2.28）开始，上述示例中的非标准sendAsBinary方法被视为已弃用，并将很快删除。可以使用标准的send（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;
}

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 个答案: