Question

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

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

Answer 1

是的，这是非常简单的代码示例：

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类型的内容进行上传。

Answer 2

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

如何使用javascript上传文件？

2 个答案: