我正在开发一个 ASP.NET MVC3 应用程序。我正在实施自定义图片库,但遇到了很多困难。目标浏览器是 IE9,所以我不能使用 HTML5 File API。我所有的代码都在强类型的 Razor 视图中@using Html.BeginForm
,我想为用户实现功能,以便在提交之前能够添加/删除任意数量的图像。
根据我的研究,我了解到实际上没有办法在实际保存之前在 IE9 中预览图像,所以我不得不在主窗体之外获取画廊的代码。现在我可以将图像上传到服务器,但我需要重新加载页面才能显示新的页面,这与我想要实现的完全相反 - 感觉图像只是预览并且唯一的保存是在主表单提交上执行。
根据我的经验,我知道这种事情是使用 AJAX 实现的,但我不知道如何编写我的代码。这就是我现在所拥有的,但我不确定我是否走在正确的道路上:
using(Html.BeginForm("UploadPicture", "Forms", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<span class="document-image-frame">
<input type="file" name="file" />
<input type="submit" value="OK" class="blabla" />
</span>
}
然后我使用这个脚本试图找到一种方法来获取新上传的图像的路径而无需重新加载:
$(document).on('click', '.blabla', function () {
if (confirm('Do you want to save the image?')) {
$.ajax({
url: this.href,
type: 'POST',
context: this,
success: function (result) {
$(this).closest('span').remove();
$("#ajaxBusy").remove();
}
});
}
return false;
})
该脚本最初是为其他目的而制作的。我不需要确认,但认为现在不痛。