前台页面

 @{

     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. 打通移动App开发的任督二脉、实现移动互联创业的中国梦

    年初的两会上,第一次听到克强总理讲到“互联网+”的计划,当时就让我为之感到无比振奋.我个人的理解是:“互联网+”的本质就是要对传统行业供需双方的重构,通过移动互联技术来推动各个行业上的全民创新,促使中 ...

  2. [ZigBee] 4、ZigBee基础实验——中断

    前言 上一篇介绍了CC2530的IO的基础知识,并用LED的控制来展示如何配置并控制GPIO的输出,用KEY状态的读取实验来展示如何读取GPIO的状态.从上一节的KEY状态读取的代码看出是采用轮训方式 ...

  3. 锋利的JQuery —— 事件和动画

    大图猛戳

  4. Atitit 研发体系建立 数据存储与数据知识点体系知识图谱attilax 总结

    Atitit 研发体系建立 数据存储与数据知识点体系知识图谱attilax 总结 分类具体知识点原理规范具体实现(oracle,mysql,mssql是否可以自己实现说明 数据库理论数据库的类型 数据 ...

  5. Atitit vod click event design flow  视频点播系统点击事件文档

    Atitit vod click event design flow  视频点播系统点击事件文档 重构规划1 Click cate1 Click  mov4 重构规划 事件注册,与事件分发管理器分开 ...

  6. Atitit dsl对于数组的处理以及main函数的参数赋值

    Atitit dsl对于数组的处理以及main函数的参数赋值 1.1. 词法解析..添加了[] 方括号的解析支持1 1.2. Ast建立.添加了数组参数的支持..使用了递归下降法..getparam ...

  7. JS脚本

    js脚本是嵌在网页里打出的一块区域,一般写在最下端 script   脚本 //      这是单行注释的一种语法 /**/  这是多行注释的一种语法 存储内容的东西叫变量 数据类型的有: 1  整型 ...

  8. SpringMVC与mybatis整合

    一.逆向工程生成基础信息 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE generator ...

  9. TypeScript实例

    interface Person { firstName: string, lastName: string } function greeter(person: Person) { return p ...

  10. android上引入七牛 上传图片或者文件 最终整理版本(可用)

    前言: 以下是引入七牛的步骤,以及在七牛中上传文件和获取文件private 私密地址. 生成上传凭证和获取下载凭证 具体如果使用过程有什么疑问可以加QQ(备注:七牛问题). 1:导入相关的包(注意是4 ...