ASP.NET MVC中,怎么使用jquery/ajaxForm上传文件

ajaxForm插件最好选择:jquery forms plugin.

以下为示例:

Ajax.BeginForm

 @using (Ajax.BeginForm("YourAction", "YourController", new AjaxOptions() { HttpMethod = "POST" }, new { enctype = "multipart/form-data"}))
{
    @Html.AntiForgeryToken()
    <input type="file" id="file" name="files"><br>
    <input type="submit" value="Upload File to Server">
}

或者

 @using (Html.BeginForm("YourAction", "YourController", new{ area = "YourArea" }, FormMethod.Post,new { enctype = "multipart/form-data"}))
{
    @Html.AntiForgeryToken()
    <input type="file" id="file" name="files"><br>
    <input type="submit" value="Upload File to Server">
}

Action Method

[HttpPost]
    [ValidateAntiForgeryToken]
    public void YourAction(IEnumerable<HttpPostedFileBase> files)
    {
        if (files != null)
        {
            foreach (var file in files)
            {
                // Verify that the user selected a file
                if (file != null && file.ContentLength > 0)
                {
                    // extract only the fielname
                    var fileName = Path.GetFileName(file.FileName);
                    // TODO: need to define destination
                    var path = Path.Combine(Server.MapPath("~/Upload"), fileName);
                    file.SaveAs(path);
                }
            }
        }
    }

需要注意:

1,)如果是当前view页面不是~{/Area}/Views/Your/Your.cshtml页面,只能返回void,string,不可以ViewResult,JsonResult,ContentResult等。

1.1,)如果需要返回参数,可以把void 改成string。

1.2,)如果要返回对象,要把对象序列化为字符串,返回字符串;客户端提交时指定返回数据格式:$("#file")ajaxFrom({data:{},dataType:‘json‘,...})。

Progress Bar

<div class="progress progress-striped">
       <div class="progress-bar progress-bar-success">0%</div>
</div>
<div id="status"></div>

Jquery & Form script

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>

<script>
(function() {

var bar = $(‘.progress-bar‘);
var percent = $(‘.progress-bar‘);
var status = $(‘#status‘);

$(‘form‘).ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = ‘0%‘;
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + ‘%‘;
        bar.width(percentVal)
        percent.html(percentVal);
    },
    success: function() {
        var percentVal = ‘100%‘;
        bar.width(percentVal)
        percent.html(percentVal);
    },
    complete: function(xhr) {
        status.html(xhr.responseText);
    }
}); 

})();
</script>

参考:http://stackoverflow.com/questions/19042116/ajax-beginform-in-mvc-to-upload-files

时间: 2024-10-11 16:41:20

ASP.NET MVC中,怎么使用jquery/ajaxForm上传文件的相关文章

jquery ajaxform上传文件返回不提示信息的问题

在使用jquery的ajaxform插件进行ajax提交表单并且上传文件的时候,返回类型datatype :json但是后台通过写出一个json对象后,在执行完以后没有进入success函数,而是直接弹出一个下载窗口,将json串当下载来处理了.后来发现解决方法是,不能把json串以json的形式写出来,而是以"text/html"的格式,并把json串放到textarea标签中. 例如: response.setContentType("text/html;charaset

在MVC中利用uploadify插件实现上传文件的功能

趁着近段的空闲时间,开发任务不是很重,就一直想把以前在仓促时间里所写的多文件上传功能改一下,在网上找了很多例子,觉得uploadify还可以,就想用它来试试.实现自己想要的功能.根据官网的开发文档,同时借鉴别人的经验,经过断断续续的修改(中间一直被安排其它事),把uploadify默认的样式改,同时把共性都封装了一下,最终完工了. 1.在_Layout.cshtml 页面中引入js文件和CSS文件: 1 @*-------上传文件--------*@ 2 <link href="@Url.

jquery.uploadify上传文件配置详解(asp.net mvc)

页面源码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery upload上传文件(asp.net mvc)配置</title> <script src="Resources/jquery.js"

不使用ASP.NET中的服务器控件将如何上传文件?

遇到文件的上传时,可能会有大部分的开发者喜欢使用服务器控件,虽然很方便,但是却不能很好的控制,不具灵活性. 现给出例子,使用html标签语言灵活的控制文件的上传. 1.html部分 <input type="file" id="uploadFile" name="uploadFile" style="display: none;"/> <a href="#" id="upload

MVC3+jquery Uploadify 上传文件

最近做项目用到了上传图片的功能,以前也写过这类代码,不过都是用传统的file标签,今天整理一个好用的插件Uploadify..都做了一些注释,一看便知. 可以去官网下载最新的:Uploadify下载地址:http://www.uploadify.com/download/ 1.引用文件 <link href="@Url.Content("~/Scripts/uploadify/uploadify.css")" rel="stylesheet"

WPF中利用WebClient向服务器上传文件

转载:原文地址http://blog.csdn.net/wj1589300/article/details/9255631 WPF中利用WebClient向服务器上传文件 忽然接到一个任务,在WPF中上传文件至服务器~在网上搜了很多种方法,最终决定利用WebCient实现文件的上传工作,看似很简单的任务,却遇到了很多问题.先说一下我的探索步骤吧~ 一.选用WebClient.UploadFile方法 (String,String, String) [csharp] view plaincopyp

ueditor1.3.6jsp版在struts2应用中上传图片报&quot;未找到上传文件&quot;解决方案

摘要: ueditor1.3.6jsp版在struts2应用中上传图片报"未找到上传文件"解决方案 在struts2应用中使用ueditor富文本编辑器上传图片或者附件时,即使配置好了上传路径信息,也会出现"未找到上传文件"的错误提示,出先该问题的原因是:在配置struts过滤器,过滤路径设置/*方式时,由于struts2框架默认使用apache的Commons FileUpload组件和内建的FileUploadInterceptor拦截器实现上传,会将reque

IE下AjaxForm上传文件直接提示下载的兼容性Bug

使用AjaxForm上传文件时候,在IE下直接提示下载保存: 我的示例代码: return this.Json( new { prop1 = 5, prop2 = 10 }); 这种问题只出现在IE下,是由于AjaxFrom只接受以Html格式返回的Json,所以需要在返回的json对象里设置content: return this.Json( new { prop1 = 5, prop2 = 10 }, "text/html");

ASP.NET MVC在服务端把异步上传的图片裁剪成不同尺寸分别保存,并设置上传目录的尺寸限制

我曾经试过使用JSAjaxFileUploader插件来把文件.照片以异步的方式上传,就像"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"中说的,这种方法足够轻.足够好.但今天,要在前面的基础上再增加2个需求: 1.异步判断上传的图片是否超过最大限制2.把上传的图片裁剪成大中小3张图片,分别保存,删除的时候一块被删除 上传图片如果超出最大尺寸限制,终止上传,并报错误信息. 前台上传图片,显示缩略图. 在项目根目录下的指定文