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.異步上傳二進制文件