前台页面

 @{

     Layout = null;

 }

 <!DOCTYPE html>

 <html>

 <head>

     <meta name="viewport" content="width=device-width" />

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

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

     <title>upload</title>

 </head>

 <body>

     <form id="fileForm" method="post" enctype="multipart/form-data" action="/upload/upload">

         文件名称：<input name="fileName" type="text"><br />

         上传文件：<input name="myfile" type="file" multiple="multiple"><br />

         <input id="submitBtn" type="submit" value="提交">

         <img src="#" alt="my img" id="iceImg" width="300" height="300" style="display: block;" />

     </form>

     <input type="text" name="height" value="170" />

     <input id="sbtn2" type="button" value="提交表单2">

     <input type="text" name="userName" value="" />

     <script type="text/javascript">

         $(function () {

             $("#fileForm").ajaxForm({

                 //定义返回JSON数据，还包括xml和script格式

                 //clearForm Boolean值属性，表示是否在表单提交成功后情况表单数据

                 //dataType 提交成果后返回的数据格式，可选值包括xml，json或者script

                 //target 服务器返回信息去更新的页面对象，可以是jquery选择器字符串或者jquer对象或者DOM对象。

                 //type 提交类型可以是”GET“或者”POST“

                 //url 表单提交的路径

                 dataType: 'json',

                 beforeSend: function () {

                     //表单提交前做表单验证

                     $("#myh1").show();

                 },

                 success: function (data) {

                     //提交成功后调用

                     //alert(data.message);

                     $("#iceImg").attr('src', '/upload/img/' + data.fileName);

                     $("#myh1").hide();

                     //防止重复提交的方法

                     //1.0 清空表单数据

                     $('#fileForm').clearForm();

                     //2.0 禁用提交按钮

                     //3.0 跳转页面

                 }

             });

             $("#myfile").change(function () {

                 $("#submitBtn").click();

             });

             $("#iceImg").click(function () {

                 $("#myfile").click();

             });

         });

     </script>

     <h1 id="myh1" style="display: none;">加载中...</h1>

 </body>

 </html>

后台代码

using System;

using System.Collections.Generic;

using System.Drawing;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace IceMvc.Controllers

{

    public class UploadController : Controller

    {

        //

        // GET: /Upload/

        public ActionResult Index()

        {

            return View();

        }

        [HttpPost]

        public ActionResult Upload()

        {

            var filesList = Request.Files;

            for (int i = ; i < filesList.Count; i++)

            {

                var file = filesList[i];

                if (file.ContentLength > )

                {

                    if (file.ContentLength > )

                    {

                        return Content("<script>alert('注册失败!因为您选择图片文件不能大于5M.');window.location='/User/Register';</script>");

                    }

                    //得到原图的后缀

                    string extName = System.IO.Path.GetExtension(file.FileName);

                    //生成新的名称

                    string newName = Guid.NewGuid() + extName;

                    string imgPath = Server.MapPath("/upload/img/") + newName;

                    if (file.ContentType.Contains("image/"))

                    {

                        using (Image img = Image.FromStream(file.InputStream))

                        {

                            img.Save(imgPath);

                        }

                        var obj = new { fileName = newName };

                        return Json(obj);

                    }

                    else

                    {

                        //return Content("<script>alert('注册失败!因为您未选择图片文件.');window.location='/User/Register';</script>");

                    }

                }

            }

            return Content("");

        }

        public ActionResult Afupload()

        {

            return View();

        }

    }

}

jquery.form.js实现异步上传的更多相关文章

  1. jquery.form.js 实现异步上传

    前台: <form id="formSeacrh" action="/ResumeInfo/uploadFile" method="post&q ...

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

    项目中最近有用到表单提交,是带有图片上传的表单录入,需要ajax异步提交,网上找了好多例子都是只能提交上传字段一个信息的,这里整理一下.表单里有普通文本信息字段也有图片上传字段. 1.jsp代码--引 ...

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

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

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

    首先我们需要做准备工作: jquery下载:http://files.cnblogs.com/tianguook/jquery1.8.rar jquery.form.js下载:http://files ...

  5. 解决 jquery.form.js和springMVC上传 MultipartFile取不到信息

    前段页面: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...

  6. ThinkPHP+JQuery实现文件的异步上传

    前端代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...

  7. jquery.form 兼容IE89文件上传

    导入部分 <script type="text/javascript" src="js/jquery-1.8.3.min.js" charset=&quo ...

  8. jQuery插件之ajaxFileUpload异步上传

    介绍 AjaxFileUpload.js 是一个异步上传文件的jQuery插件,原理是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 下载地址: http://files.cnblogs. ...

  9. PHP JS JQ 异步上传并立即显示图片

    提交页面: <! DOCTYPE html> < html> < head> < meta charset ="GB2312" > ...

随机推荐

  1. Wix 安装部署教程(十一) ---QuickWix

    这次发布的是这两天做的一个WIX工具QuickWIX,主要解决两个问题点1.对大文件快速生成wix标签(files,Directories,ComponentRef):2.比较前后两次工程的差异.大的 ...

  2. java提高篇(十二)-----代码块

    在编程过程中我们可能会遇到如下这种形式的程序: public class Test { { //// } } 这种形式的程序段我们将其称之为代码块,所谓代码块就是用大括号({})将多行代码封装在一起, ...

  3. 谈谈对BPM的理解

    BPM的产生缘由 近年来,随着计算机技术的发展和互联网时代的到来,我们已经进入了信息时代,也称为数字化时代,在这数字化的时代里,企业的经营管理都受到了极大的挑战.从上世纪90年代起至今,企业的信息化工 ...

  4. ASP.NET MVC 随想录—— 使用ASP.NET Identity实现基于声明的授权，高级篇

    在这篇文章中,我将继续ASP.NET Identity 之旅,这也是ASP.NET Identity 三部曲的最后一篇.在本文中,将为大家介绍ASP.NET Identity 的高级功能,它支持声明式 ...

  5. Yii CModel中rules验证规则[转]

    array( array(‘username’, ‘required’), array(‘username’, ‘length’, ‘min’=>3, ‘max’=>12), array( ...

  6. JavaScript 常用功能总结

    小编吐血整理加上翻译,太辛苦了~求赞! 本文主要总结了JavaScript 常用功能总结,如一些常用的JS 对象,基本数据结构,功能函数等,还有一些常用的设计模式. 目录: 众所周知,JavaScri ...

  7. 谨慎DateTime.Now在EF的query中的使用

    执行如下代码: var query = from tr in _carrierRepository select new BaseCarrier { CarrierCode = tr.CarrierC ...

  8. 转 jsp中 session的简单用法

    Session对象:是用来分别保存每一个用户信息的对象,以便于跟踪用户的操作状态．Session的信息保存在服务端,Session的ID保存在客户机的Cookie中．事实上,在许多服务器上,如果浏览器 ...

  9. Atitit. Atiposter 发帖机 新特性 poster new feature v11  .docx

    Atitit. Atiposter 发帖机 新特性 poster new feature v11  .docx 1.1.  版本历史1 2. 1. 未来版本规划2 2.1. V12版本规划2 2.2. ...

  10. Atiti  attilax主要成果与解决方案与案例rsm版 v2

    Atiti  attilax主要成果与解决方案与案例rsm版 v2 1. ##----------主要成果与解决方案与 参与项目1 ###开发流程与培训系列1 #-----组织运营与文化建设系列1 # ...