Jquery不使用form表单异步上传文件的方法

 

 

如今的项目中须要使用到不刷新页面的方式实现上传文件，实现方法以下：

html代码：

1. 文件:<input id="file" type="file" name="file"/>

2. <button id="upload">上传文件</button>

js代码：

1. $(function () {

2. $("#upload").click(function(){

3. var formData = new FormData();

4. formData.append('file', $('#file')[0].files[0]);

5.  

6. $.ajax({

7. url: "http://127.0.0.1:8081/uploadFile/addUploadFileUrl",

8. type: "POST",

9. data: formData,

10. /**

11. *必须false才会自动加上正确的Content-Type

12. */

13. contentType: false,

14. /**

15. * 必须false才会避开jQuery对 formdata 的默认处理

16. * XMLHttpRequest会对 formdata 进行正确的处理

17. */

18. processData: false,

19. success: function (data) {

20. alert("success");

21.  

22. },

23. error: function () {

24. alert("上传失败！");

25.  

26. }

27. });

28. })

29. });

js中有对FormData对象的使用：

1.用一些键值对来模拟一系列表单控件：即把form中全部表单元素的name和value组装成一个queryString

2.异步上传二进制文件