JQuery的ajaxFileUpload图片上传初试

Posted 蜗牛噢

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery的ajaxFileUpload图片上传初试相关的知识,希望对你有一定的参考价值。

本案例主要说讲使用ajaxFileUpload实现图片的异步上传。

 

1、html代码部分

这里的代码,主要设置一下name,后台获取时候要用到,还有设置一个onchange的事件对应的方法:ajaxFileUpload()

 

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

 

 

2、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

 

3、后台处理代码(此处为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#代码

 

以上是关于JQuery的ajaxFileUpload图片上传初试的主要内容,如果未能解决你的问题,请参考以下文章

jsp中使用jquery的ajaxfileupload插件怎么实现异步上传

jquery异步上传图片

关于ajaxFileUpload图片上传,success和error都触发的情况

jQuery插件ajaxfileupload.js源码与使用

jq 图片上传

ajaxfileupload插件上传图片功能,用MVC和aspx做后台各写了一个案例