.Net MVC +jquery+ajax局部动态刷新图片

.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
            });
        }