在使用 ajax/jQuery 在 MVC 中提交表单之前上传图像答案

【问题标题】：Uploading images prior to submitting a form in MVC using ajax/jQuery在使用 ajax/jQuery 在 MVC 中提交表单之前上传图像
【发布时间】：2011-05-07 12:20:45
【问题描述】：

我想在我的 MVC 应用程序中构建一个包含几个输入字段的表单。除此之外，我想让用户通过在他的硬盘上选择一个图像，然后单击一个上传按钮来异步上传一些图像。上传成功后，处理图片上传的控制器会生成图片的缩略图，并将图片的 url 发送回页面，从而允许在当前页面上显示图片的缩略图。成功上传 3 张图片后，用户就可以实际提交整个表单进行处理了。

我需要一个起点。代码示例的链接将不胜感激。提前致谢。

【问题讨论】：

标签： jquery asp.net-mvc ajax file-upload

【解决方案1】：

我使用名为Uploadify 的插件取得了巨大成功。它是基于 Flash 的，但它可以异步上传多张图片，非常可定制，并且有大量的回调可以挂钩来实现你想要的。

唯一的问题是，它被设计为与 PHP 一起使用，尽管人们已经能够成功地将它与 ASP 一起使用。尽管如此，我还是会推荐它。

【讨论】：

是的。另一种选择是swfupload（也基于 Flash）

【解决方案2】：

我在我的项目中使用http://valums.com/ajax-upload/。请在此处查看我的问题以获取设置帮助：

Need help debugging XHR-based Ajax Image Upload with ASP.NET MVC2

他在文档中没有提到的一件事是插件期望上传结果为 JSON，所以如果成功，你会写

返回 Json(new{success=true})

要返回错误，请使用 {error="error message"}。

如果您不以这种方式处理 - 上传总是会失败，即使它成功了。请参阅本教程以将图像存储在数据库中

http://byatool.com/mvc/asp-net-mvc-upload-image-to-database-and-show-image-dynamically-using-a-view/

就缩略图而言，我不确定压缩图像的好方法，但我找到了本教程，您应该能够提取调整大小代码并将其放在上传操作中

http://www.aspdotnetcodes.com/Asp.Net_Dynamic_Thumbnail_Creation.aspx

希望有帮助！

【讨论】：

【解决方案3】：

老实说，我非常喜欢 jquery 的 ajaxSubmit 插件。我自己将它用于我的网站。你所要做的就是

$(#form_element).submit(function {
    $(this).ajaxSubmit();
});

参考：http://be.twixt.us/jquery/formSubmission.php

【讨论】：