JQuery的ajaxFileUpload图片上传初试

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

1、html代码部分

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

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

html代码

2、js部分代码

使用这部分代码，需要引入jq和ajaxfileupload.js这两个文件。在这里主要设置上传路径和对返回的结果做相应的处理

 //文件上传
 function ajaxFileUpload() {

     //图片格式验证
     var x = document.getElementById("uploadImage");
     if (!x || !x.value) return;
     var patn = /\.jpg$|\.jpeg$|\.png$|\.gif$/i;
     if (!patn.test(x.value)) {
         alert("您选择的似乎不是图像文件。");
         x.value = "";
         return;
     }

     var elementIds = ["uploadImage"]; //flag为id、name属性名
     $.ajaxFileUpload({
         url: '/Forum/SaveImage',//上传的url，根据自己设置
         type: 'post',
         secureuri: false, //一般设置为false
         fileElementId: 'uploadImage', // 上传文件的id、name属性名
         dataType: 'text', //返回值类型，一般设置为json、application/json
         elementIds: elementIds, //传递参数到服务器
         success: function (data, status) {
             //alert(data);
             if (data == "Error1") {
                 alert("文件太大，请上传不大于5M的文件！");
                 return;
             } else if (data == "Error2") {
                 alert("上传失败，请重试！");
                 return;
             } else {
                 //这里为上传并做一下请求显示处理，返回的data是对应上传的文件名
                 $("#ReplyContent").append("<img width='300' height='300' src='" + "../UploadFile/ForumImages/" + data + "'/>");

             }
         },
         error: function (data, status, e) {
             alert(e);
         }
     });
     //return false;
 }

JS

3、后台处理代码（此处为C#）

后台的处理主要有对上传文件的格式验证，文件大小验证，给文件重命名和设置一下保存路径，最后返回图片的新名字。这样js就可以根据路径去请求该图片并展示出来。

 try
             {
                 //判断上传文件的数目
                 if (Request.Files.Count > )
                 {
                     //获取文件
                     HttpPostedFileBase proImage = Request.Files["upload"];//获取上传的图片

                     //判断上传文件大小，小于5M
                     if (proImage.ContentLength >  *  * )
                     {
                         return Content("Error1");
                     }

                     //截取图片类型：image/png
                     string[] filetypes = proImage.ContentType.Split('/');

                     //判断文件的类型
                     if (filetypes[] == "jpg" || filetypes[] == "gif" || filetypes[] == "png" || filetypes[] == "bmg" || filetypes[] == "jpeg")
                     {
                         //给上传文件重命名
                         string filename = DateTime.Now.ToString("yyyyMMddHHmmssfff") + Guid.NewGuid().ToString();

                         //文件保存的路径
                         string filesavepath = Server.MapPath("~/Uploadfile/ForumImages/" + filename + "." + filetypes[]);

                         //保存图片
                         proImage.SaveAs(filesavepath);

                        //返回文件名，可以在前台展示出来
                        return Content(filename + "." + filetypes[]);
                     }
                     else
                     {
                         //图片格式不对
                        return Content("Error2");
                     }

                 }
                 else
                 {    //上传图片数目小于或者等于0
                     return Content("Error1");
                 }
             }
             catch {
                 return Content("Error2");
             }

c#代码