ajax无刷新上传文件

网页上传文件最简单的方式就是通过表单上传了，但是在提交表单的时候会导致网页刷新，但有的时候我们不想网页刷新，有什么办法呢，我们可以使用ajax上传文件来做到这一点。只有ajax还不行，还需要JavaScript的FormData对象配合才行，且这里我们使用jQuery的ajax。

第一步，创建FormData对象

创建FormData的方式有两种：

1、基于HTML表单

<form action="upload.php" id="uploadForm">
    <input type="file" name="file">
    <input type="text" name="CustomField" value="This is some extra data">
</form>

上面的HTML代码是一个简单的表单，这里form表单可以不用添加enctype="multipart/form-data"的属性

var fd = new FormData($('#uploadForm')[0]);

2、不使用HTML表单

HTML只需要一个file类型的input就可以了

<input type="file" id="file">　　

然后创建

var fileInput = $("#file")[0];
var fileObj = fileInput.files[0]; //这里只选择一个文件
var fd = new FormData();
fd.append("file", fileObj);
fd.append("CustomField", "Extra data");

第二步，使用ajax上传

$.ajax({
  url: "upload.php",
  type: "POST",
  data: fd,
  processData: false,  // 不处理数据
  contentType: false   // 不设置内容类型
});

这样就实现了无刷新上传文件了。

更详细的使用说明，包括使用原生的XMLHttpRequest对象提交ajax请求上传文件，可以参考下面的链接：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects