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

Question

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

我需要一个起点。非常感谢提供代码示例的链接。提前致谢。

- Mats

Answer 1

我曾经使用过一个叫做Uploadify的插件，取得了很大的成功。它是基于Flash的，但可以异步上传多个图像，非常可定制，并且有很多回调函数可以钩住以实现你想要的功能。

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

- Chris Laplante

---

是的。另一个选择是swfupload（也是基于Flash的）。 - Pekka

Answer 2

我在我的项目中使用http://valums.com/ajax-upload/。需要帮助设置它，请参考我的问题：

需要帮助调试基于XHR的Ajax图片上传与ASP.NET MVC2

文档中没有提到的一件事是，该插件期望以JSON格式返回上传结果，所以在成功的情况下，你应该写

return Json(new{success=true})

如果出现错误，请使用{error="错误消息"}。

如果不按照这种方式处理 - 即使上传成功，它也会始终显示为失败。请参考此教程将您的图像存储在数据库中。

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

希望这能帮到你！

- Grahame A

Answer 3

我个人非常喜欢jquery的ajaxSubmit插件。我自己在我的网站上使用了它。你所需要做的就是

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

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

- syte