本案例主要说讲使用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#代码