Ajax对Form表单图片的局部上传

2016-12-24 20:02:32来源:CSDN作者:houshubin人点击

第七城市

首先引入jquery.form.js

1.创建一个form表单(("~/Content/productPic/")是保存图片的路径)

@using(Html.BeginForm("UploadIcon","FlowChartForm",FormMethod.Post,new     {ID="uploadpic",enctype="multipart/form-data"}))

{

<input type="file" name="imgfile" onchange="$('#uploadpic').submit();" style="width:200px;"/><br/>

<img id="imgicon" src="@(Url.Content("~/Content/productPic/")+ViewData["picName"])" style="display:none;width:80px;height:60px;"/>

@Html.Hidden("iconurl",ViewData["picName"]);

}

2.使用ajax提交图片(进行ajaxt提交的方法)

$(function(){

$('uploadpic').ajaxForm({

success:function(data){

var data=jQuery.parseJSON(data);

if(data!=undefined&&data!=null){

if(data.msg==0){

alert("请上传图片!");

return;

}else if(data.msg==-1){

alert("文件格式不正确!");

return;

}else if(data.mag==-2){

alert("上传图片不能超过3M!");

return;

}else if(data.msg==-3){

alert("出现异常,请稍后再试")!/

return;

}else{

var path="@Url.Content("../Content/productPic")"+data.msg;

$("#imgicon").attr("src",path);

$("#imgicon").show();

}

}

}

})

});

3.后台代码

[HttpPost]

public JsonResult UploadIcon(HttpPostedFileBase imgfile)

{

try

{

if(imgfile==null)

{

return Json(new{msg=0},"text/html");

}else

{

var supportTypes=new []{"jpg","jpeg","png","gif","bmp"};

var fileExt=System.IO.Path.GetExtension(imgfile.FileName).Substring(1);

if(!supportTypes.Contains(fileExt))

{

return Json(new {msg=-1},"text/html");

}

if(imgfile.ContentLength>1024*1000*3)

{

return Json(new {msg=-1},"text/html");

}

Random r=new Random();

var filename=DateTime.Now.ToString("yyyyMMddHHmmss")+r.Next(10000)+"."+fileExt;

var filepath=System.IO.Path.Combine(Server.MapPath("~/Content/productPic/"),filename);

imgfile.SaveAs(filepath);

ViewData["picName"]=filepath;

return Json(new {msg=filename},"text/html");

}

}catch(Execption e)

{

return Json(new{msg=-3},"text/html");

}

}

注意:我引入form.js之后使用ajaxForm方法,提示对象对定义,然后我就感觉奇了怪,这根本就是不科学的,后来找啊找,最后把开头的引入模板设置为null就行啦,哎。。。。

@{

Layout=null;

}


第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台