如何使用JavaScript上传文件？

这个问题在这里已经有了答案：

我怎样才能异步上传文件？ 27个答案

---

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

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进行上传。

---

如果你想要纯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类型，扩展名，重命名它们）。

链接地址: http://www.djcxy.com/p/19619.html

上一篇: How to upload file using javascript?

下一篇: How to ajax post an image to a C# web method with jquery