如何使用javascript上传文件？

Question

<form method="post" action="#" onsubmit="uploadImage">
    <input type="file" name="imgFile" >
    <input type="submit" id="submit" value="upload">
</form>

如何使用带有ajax调用的javascript上传图像。

Answer 1

如果您想要纯 JS，这只是一个快速的 JavaScript 解决方案。

var file = document.getElementById('id of your input:file').files[0];
var ajax = new XMLHttpRequest;

var formData = new FormData;
formData.append('imagefile', file);

ajax.upload.addEventListener("progress", myProgressHandler, false);
ajax.addEventListener('load', myOnLoadHandler, false);
ajax.open('POST', 'upload.php', true);
ajax.send(formData);

注意：一些消息来源说，调用 Ajax 的open方法应该在创建对象之后（ajax在本例中是在任何操作之前），但我个人在这种方式使用它时从未遇到过任何麻烦。所以这取决于你。

活动：

function myProgressHandler(event) {
  //your code to track upload progress
  var p = Math.floor(event.loaded/event.total*100);
  document.title = p+'%';
}

function myOnLoadHandler(event) {
  // your code on finished upload
  alert (event.target.responseText);
}

您还可以添加更多事件处理程序，例如“ error”或“ abort”。当然，您需要编写upload.php来处理上传的文件（PHP 只是一个示例；有很多示例如何在 SO 上执行此操作）。

change您所需要的只是对输入文件元素的“”事件（代码的上部）进行 Ajax 调用。

此外，您可以编写一些featuresCheck功能，以便如果用户的浏览器不支持某些功能，则提供基本的文件上传功能。

function featuresCheck() {
  var res = window.XMLHttpRequest && window.FormData && window.addEventListener;
  if (res) return true; else return false;
}

/* and test it in your code */
if (featuresCheck()) {
  // use ajax upload
  }
else {
  // use simple file uploader
  }

如果您想使用multiple文件输入的属性，则无法使用.files[0]（选择第一个文件），并且您需要对文件列表进行一些循环，并为每个文件进行单独的上传（当然是异步的）。

注意安全。在将上传的文件从临时位置移动之前，请仔细检查它们（检查 MIME 类型、扩展名、重命名它们）。

Answer 2

是的，这是可能的，这是一个非常简单的代码示例：

function upload()
{
    var data = new FormData(),
        files = // some <input type="file" />

    data.append('image', files[0]);

    $.ajax({
        url: // Your ajax url, say it's upload.php,
        type: 'post',
        dataType: 'json',
        data: data,
        processData: false,
        contentType: false,
        success: function(image)
        {
            // whatever you want to do 
        }
    });
};

然后在upload.php 中，您需要选择$_POST值并执行上传move_uploaded_file操作。