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

时间:2010-11-09 20:54:27

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

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

我需要一个起点。代码示例的链接将受到高度赞赏。提前谢谢。

3 个答案:

答案 0 :(得分:1)

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

唯一的一点是,它设计用于PHP,虽然人们已经能够成功地使用它与ASP。不过,我仍然会推荐它。

答案 1 :(得分:1)

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

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

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

返回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

希望有所帮助!

答案 2 :(得分:0)

老实说,我非常喜欢jquery的ajaxSubmit插件。我自己用它来做我的网站。你所要做的只是

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

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