如何使用javascript上传文件？ [复制]答案

【问题标题】：How to upload file using javascript? [duplicate]如何使用javascript上传文件？ [复制]
【发布时间】：2015-07-06 18:38:27
【问题描述】：

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

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

【问题讨论】：

你的javascript在哪里
Stack Overflow 不是代码编写服务。您应该查看将文件提交到 Web 服务器的方法，如果遇到特定问题，请询问。
好的...但只告诉我这可以使用javascript上传图片吗？
stackoverflow.com/questions/5587973/javascript-upload-file

标签： javascript

【解决方案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 类型、扩展名、重命名它们）。

【讨论】：

感谢您的代码。我要应用这个。

【解决方案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 进行上传。

【讨论】：

对不起，我只能在 javascript 或 jquery 中完成