ITPub博客

首页 > Linux操作系统 > Linux操作系统 > 关于jQuery在Asp.Net Mvc 框架下Ajax文件上传的实现

关于jQuery在Asp.Net Mvc 框架下Ajax文件上传的实现

原创 Linux操作系统 作者:iDotNetSpace 时间:2009-11-04 16:49:53 0 删除 编辑
1. 实现传统的网络文件上传解决方案

         首先,我先实现一个传统的网络文件上传方案,建立一个web页面,我还需要一个

和两个元素就能解决问题,如在Index.aspx文件中有如下元素:

 

<form id="filePost" action="/Shared/Upload" method="post" enctype="multipart/form-data">

    <label> Filename: <input type="file" name="file" />label>

    <input id="ButtonUpload" type="submit" value="Upload" />

form>

         Index.aspx中的内容就写好了。我看到action="/Shared/Upload"里面需要一个“Upload”方法响应Post请求,可见,我单击【Upload】按钮就能将Post请求到“Upload”这个action里执行后台代码。

 

后台代码:

public ActionResult Upload(HttpPostedFileBase file)

{

         if (file.ContentLength == 0) {

                   return Redirect("/Shared/Error");

         }

         var fileName = Path.Combine(Request.MapPath("~/Upload"), Path.GetFileName(file.FileName));

         try{

                  file.SaveAs(fileName);

                   return Redirect("/Home/Index");

         }catch{

                   return Redirect("/Shared/Error");

         }

}

      这样,一个传统的文件上传方案解决。单击【Upload】按钮页面将会跳转到“http://...../Shared/Upload”。

2. 实现网络文件Ajax上传解决方案

      现在对Index.aspx做一部分改动,让文件上传方案实现“Ajax”,不需要刷新页面,也能实现文件上传,而且可以很好的处理请求返回,这是我们下一步的目标。

 

      1.在Index.aspx页面添加一个元素,用于显示请求返回结果。

如:<div id="outputdiv"> div>

      2.在http://jquery.malsup.com/form/#download网站下载jquery.form.js文件,我们调用$.ajaxForm()或者$.ajaxSubmit()函数,实现目标。

<script type="text/javascript">

         $(document).ready(function() {

            var options = {

                target: '#outputdiv',  

                beforeSubmit: showRequest, 

                success: showResponse

            };

            $('#filePost').submit(function() {

                $(this).ajaxSubmit(options);

                return false;

            });

        });

        function showRequest(formData, jqForm, options) {          

            alert('发送前');

            return true;

        }

        function showResponse(responseText, statusText) {

            alert('发送后');

        } 

</script>

      在Index.aspx页面中添加如上代码。

    3.在<div id="outputdiv"> div>元素中我希望它能显示文件上传的结果,所以,Upload方法返回文本就可以,下面修改Upload方法如下:

public ActionResult Upload(HttpPostedFileBase file)

{

         if (file.ContentLength == 0) {

                   return Content("没有文件", "text/plain");

         }

         var fileName = Path.Combine(Request.MapPath("~/Upload"), Path.GetFileName(file.FileName));

         try{

                  file.SaveAs(fileName);

                  return Content("上传成功", "text/plain");

         }catch{

                   return Content("上传失败", "text/plain");

         }

}

实现Ajax文件上传解决方案。关于jquery.form的更多信息,读者可看考http://jquery.malsup.com/form/

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/12639172/viewspace-618124/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2008-01-04

  • 博文量
    2376
  • 访问量
    5766116