[Asp.net mvc]jquery.form.js无刷新上传

写在前面

最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋。在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jquery.form.js的插件实现。

demo

首先通过nuget安装插件jquery.form.js

引入js文件

  <script src="~/Scripts/jquery.form.min.js"></script>

前端调用的代码

@{
    ViewBag.Title = "Upload";
}

<form enctype="multipart/form-data" method="post" id="upload">
    <input type="file" id="fileupload" name="Upload" />
    @* button 而不是 submit *@
    <input type="button" value="上传" id="btn">
</form>
<script>
    $("#btn").click(function () {
        $("#upload").ajaxSubmit({
            url: "../test/UploadFile",
            type: "post",
            success: function (data) {
                console.log(data);
            },
            error: function (aa) {
                console.log(aa);
            }
        });
    });
</script>

服务端代码

    public class TestController : Controller
    {
        // GET: Test
        public ActionResult Upload()
        {
            return View();
        }
        [HttpPost]
        public JsonResult UploadFile()
        {
            HttpPostedFileBase file = Request.Files[0];
            if (file != null)
            {
                string fileName = Path.GetFileName(file.FileName);
                string fileExt = Path.GetExtension(file.FileName);
                string fileNewName = Guid.NewGuid() + fileExt;
                string fileSaveDir = Server.MapPath("~/upload");
                if (!Directory.Exists(fileSaveDir))
                {
                    Directory.CreateDirectory(fileSaveDir);
                }
                file.SaveAs(Path.Combine(fileSaveDir, fileName));
                return new JsonResult
                {
                    Data = new
                    {
                        _code = 200,
                        _msg = "上传成功",
                        _data = new
                        {
                            _url = "/upload/" + fileNewName,
                            _oldName = fileName
                        }
                    }
                    ,
                    JsonRequestBehavior = JsonRequestBehavior.DenyGet
                };
            }
            return new JsonResult { Data = new { _code = 200, _msg = "上传失败" }, JsonRequestBehavior = JsonRequestBehavior.DenyGet };
        }
    }

测试

jquery.form上传文件内部是怎么实现无刷新的呢?

调试下js你会发现,内部是通过iframe实现的无刷新上传,如下图所示:

总结

最近在网盘项目中用到了上传,本来打算使用ajax.beginform实现,发现并实现不了。只能用jquery.form插件代替了。

时间: 2024-10-14 04:34:27

[Asp.net mvc]jquery.form.js无刷新上传的相关文章

jQuery.form Ajax无刷新上传错误 (jQuery.handleError is not a function) 解决方案

今天,随着ajaxfileupload时间firebug财报显示,"jQuery.handleError is not a function"错误.因为一旦使用jQuery.form问题,我对照曾经的项目才发现,在这个项目中使用的jQuery是1.10.2的版本号,而曾经是使用的1.4.2.度娘一番之后,找到解决的方法:jQuery.handleError is not a function 报错原因是: handlerError仅仅在jquery-1.4.2之前的版本号中存在.jqu

jQuery.form Ajax无刷新上传报错 (jQuery.handleError is not a function) 解决办法

今天在用ajaxfileupload时firebug报了一个"jQuery.handleError is not a function"的错误.因为在以前使用jQuery.form一直都没有出现过这个问题,我对比以前的项目才发现,在这个项目中使用的jQuery是1.10.2的版本,而以前是使用的1.4.2.度娘一番之后,找到解决办法:jQuery.handleError is not a function 报错原因是: handlerError只在jquery-1.4.2之前的版本中存

jQuery AJAX 网页无刷新上传示例

新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 (不论是否 ASP.NET),内附的 FileUpload 控件,功能不足 (页面必须刷新.不支援 AJAX),或外观太丑被用户嫌弃 (却无法透过 CSS 自定义外观).网路上虽已有许多可用的示例,如: jQuery File Upload,但功能太强大.外观复杂,欲仅取出部分功能来引用,反而不易

jquery.form.js实现异步上传

前台页面 1 @{ 2 Layout = null; 3 } 4 <!DOCTYPE html> 5 <html> 6 <head> 7 <meta name="viewport" content="width=device-width" /> 8 <script src="~/Scripts/jquery-1.7.2.min.js"></script> 9 <scri

jquery.form.js 实现异步上传

前台: <form id="formSeacrh" action="/ResumeInfo/uploadFile" method="post" enctype="multipart/form-data"> <div class="form-horizontal"> <div class="form-group" style="height:100p

asp.net使用jquery.form实现图片异步上传

首先我们需要做准备工作: jquery下载:http://files.cnblogs.com/tianguook/jquery1.8.rar jquery.form.js下载:http://files.cnblogs.com/tianguook/jquery.form.js 页面JqueryFormTest.aspx: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryForm

jquery.form.js ajax提交上传文件

项目中最近有用到表单提交,是带有图片上传的表单录入,需要ajax异步提交,网上找了好多例子都是只能提交上传字段一个信息的,这里整理一下.表单里有普通文本信息字段也有图片上传字段. 1.jsp代码--引入jquery和jquery.form.js        <script type="text/javascript" src="<%=basePath %>js/jquery-1.8.3.min.js"></script>    

jquery 的ajax无刷新上传文件之后,页面还是会莫名的刷新-----解决办法

文件上传用到全局数组: $_FILES 只需要把下面的 <button onclick="post()">提交</button> 改为 <input type="button" onclick="post()" value="提交"/>就不会刷新页面了!!! 参考 http://bbs.csdn.net/topics/391852021 what fuck ... sb html   我在那

js无刷新上传文件

传统的文件上传方式 <form action="" method="POST" enctype="multipart/form-data"> <input type="file" name="file"/> <input type="submit"/> </form> 在执行上传后,页面会跳转到action指定的地址. 一般用户需要使用无页