JQuery的ajaxFileUpload圖片上傳初試

本案例主要說講使用ajaxFileUpload實現圖片的異步上傳。

 

一、html代碼部分

這裏的代碼，主要設置一下name，後臺獲取時候要用到，還有設置一個onchange的事件對應的方法:ajaxFileUpload()

 

1 插入圖片：<input style="display:initial;" type="file" alt="插入圖片" id="uploadImage" onchange="ajaxFileUpload()" name="uploadImage" /> </span>

html代碼

 

 

二、js部分代碼

使用這部分代碼，須要引入jq和ajaxfileupload.js這兩個文件。在這裏主要設置上傳路徑和對返回的結果作相應的處理

 1 //文件上傳
 2 function ajaxFileUpload() {
 3 
 4     //圖片格式驗證
 5     var x = document.getElementById("uploadImage");
 6     if (!x || !x.value) return;
 7     var patn = /\.jpg$|\.jpeg$|\.png$|\.gif$/i;
 8     if (!patn.test(x.value)) {
 9         alert("您選擇的彷佛不是圖像文件。");
10         x.value = "";
11         return;
12     }
13 
14     var elementIds = ["uploadImage"]; //flag爲id、name屬性名
15     $.ajaxFileUpload({
16         url: '/Forum/SaveImage',//上傳的url，根據本身設置
17         type: 'post',
18         secureuri: false, //通常設置爲false
19         fileElementId: 'uploadImage', // 上傳文件的id、name屬性名
20         dataType: 'text', //返回值類型，通常設置爲json、application/json
21         elementIds: elementIds, //傳遞參數到服務器
22         success: function (data, status) {
23             //alert(data);
24             if (data == "Error1") {
25                 alert("文件太大，請上傳不大於5M的文件！");
26                 return;
27             } else if (data == "Error2") {
28                 alert("上傳失敗，請重試！");
29                 return;
30             } else {
31                 //這裏爲上傳並作一下請求顯示處理，返回的data是對應上傳的文件名
32                 $("#ReplyContent").append("<img width='300' height='300' src='" + "../UploadFile/ForumImages/" + data + "'/>");
33 
34             }
35         },
36         error: function (data, status, e) {
37             alert(e);
38         }
39     });
40     //return false;
41 }

JS

 

三、後臺處理代碼（此處爲C#）

後臺的處理主要有對上傳文件的格式驗證，文件大小驗證，給文件重命名和設置一下保存路徑，最後返回圖片的新名字。這樣js就能夠根據路徑去請求該圖片並展現出來。

 1 try
 2             {
 3                 //判斷上傳文件的數目
 4                 if (Request.Files.Count > 0)
 5                 {
 6                     //獲取文件
 7                     HttpPostedFileBase proImage = Request.Files["upload"];//獲取上傳的圖片
 8 
 9 
10                     //判斷上傳文件大小，小於5M
11                     if (proImage.ContentLength > 5 * 1024 * 1024)
12                     {
13                         return Content("Error1");
14                     }
15                    
16                     //截取圖片類型：image/png
17                     string[] filetypes = proImage.ContentType.Split('/');
18 
19                     //判斷文件的類型
20                     if (filetypes[1] == "jpg" || filetypes[1] == "gif" || filetypes[1] == "png" || filetypes[1] == "bmg" || filetypes[1] == "jpeg")
21                     {
22                         //給上傳文件重命名
23                         string filename = DateTime.Now.ToString("yyyyMMddHHmmssfff") + Guid.NewGuid().ToString();
24                         
25                         //文件保存的路徑
26                         string filesavepath = Server.MapPath("~/Uploadfile/ForumImages/" + filename + "." + filetypes[1]);
27 
28                         //保存圖片
29                         proImage.SaveAs(filesavepath);
30 
31 
32 
33                        //返回文件名，能夠在前臺展現出來
34                        return Content(filename + "." + filetypes[1]);
35                     }
36                     else
37                     {
38                         //圖片格式不對
39                        return Content("Error2");
40                     }
41 
42                    
43                 }
44                 else
45                 {    //上傳圖片數目小於或者等於0
46                     return Content("Error1");
47                 }
48             }
49             catch {
50                 return Content("Error2");
51             }

c#代碼