通過Ajax方式上傳文件(input file),使用FormData進行Ajax請求

<div  >

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

                        <a class="layui-btn layui-btn-mini" id="btn_uploadimg">上傳圖片</a>

                    </div>

  

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

<script type="text/jscript">

 

       $(function () {

           $("#btn_uploadimg").click(function () {

               var fileObj = document.getElementById("FileUpload").files[0]; // js 獲取文件對象

               if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {

                   alert("請選擇圖片");

                   return;

               }

               var formFile = new FormData();

               formFile.append("action""UploadVMKImagePath");  

               formFile.append("file", fileObj); //加入文件對象

 

               //第一種  XMLHttpRequest 對象

               //var xhr = new XMLHttpRequest();

               //xhr.open("post", "/Admin/Ajax/VMKHandler.ashx", true);

               //xhr.onload = function () {

               //    alert("上傳完成!");

               //};

               //xhr.send(formFile);

 

               //第二種 ajax 提交

 

               var data = formFile;

               $.ajax({

                   url: "/Admin/Ajax/VMKHandler.ashx",

                   data: data,

                   type: "Post",

                   dataType: "json",

                   cache: false,//上傳文件無需緩存

                   processData: false,//用於對data參數進行序列化處理 這裏必須false

                   contentType: false//必須

                   success: function (result) {

                       alert("上傳完成!");

                   },

               })

           })

       })

 

   </script>

  補充 IE8 不支持.files 寫法

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章