.Net MVC +jquery+ajax局部动态刷新图片
开发环境:.Net MVC + jquery + ajax
背景:上传图片后动态刷新,无需刷新整个页面,图片立刻改变
效果演示:
1)原始页面:
2)选择文件,点击UploadImage后
3)再选择文件,再点击UploadImage后
js部分:
<script>
function imgError() {
var img = event.srcElement ? event.srcElement : event.target;
img.src = '/Images/noImg.jpg';
img.onerror = null;
}
function UploadImg() {
var img = $('#UploadImage').prop('files');
var ImageName = $('#ImageName').val();
var formData = new FormData();
formData.append('image', img[0]);
formData.append('imageName',ImageName)
$.ajax({
type: 'POST',
url: '/Product/UploadImage',
data: formData,
async: false,
processData: false,
contentType: false,
error: function (request) {
alert('Upload Fail');
},
success: function (data) {
$('#image').remove();
$('#imageSpan').next().after('<img id="image" style="width:300px;height:300px;vertical-align:top" onerror="imgError()" src="/Images/Product/' + data.path + '?' + new Date().getTime() + '" />');
}
});
}
</script>
HTML部分:
<form id="imgForm" action="#" method="post" enctype="multipart/form-data">
<div style="margin-top:30px;margin-left:10px; margin-bottom:30px;">
<span id="imageSpan" style="vertical-align:text-top">Image:</span><br />
<img id="image" style="width:300px;height:300px;vertical-align:top" onerror="imgError()" src="~/Images/Product/@(Model.Pn).jpg" />
</div>
<div class="div-inline">
<input id="UploadImage" name="UploadImage" style="margin-left:20px;" type="file" />
<input id="ImageName" name="ImageName" type="hidden" value="@Model.Pn" />
<button type="button" class="button icon fa-upload primary" onclick="UploadImg()">
UploadImage
</button>
</div>
</form>
Note:点击函数名称不能换行,否则js无效!!!!
后台Controller:
[HttpPost]
public ActionResult UploadImage() {
HttpPostedFileBase file = Request.Files[0];
string imageName = Request.Form["imageName"];
string path = Server.MapPath("~/Images/Product/");
string returnPath = ImagesHelper.ImagesSave(file, path, imageName);
return Json(new {
path = returnPath
});
}