如何使用javascript上传文件？


How to upload file using javascript?

本问题已经有最佳答案，请猛点这里访问。
1
2
3
4
<form method="post" action="#" onsubmit="uploadImage">
    <input type="file" name="imgFile">
    <input type="submit" id="submit" value="upload">
</form>

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

相关讨论

是的，这是可能的，下面是非常简单的代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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解决方案。

1
2
3
4
5
6
7
8
9
10
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之前)，但我个人从未遇到过这样的问题。所以这取决于你。

事件：

1
2
3
4
5
6
7
8
9
10
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只是一个例子，有很多例子可以这样做)。

您只需要对输入文件元素(代码的上部)的"change事件"进行Ajax调用。

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

1
2
3
4
5
6
7
8
9
10
11
12
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类型、扩展名、重命名)。

相关讨论