前台页面

 @{

     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. 《C#图解教程》读书笔记之六：接口和转换

    本篇已收录至<C#图解教程>读书笔记目录贴,点击访问该目录可获取更多内容. 一.接口那点事儿 (1)什么是接口? 一组函数成员而未实现的引用类型.只有类和结构能实现接口. (2)从ICom ...

  2. angularjs组件之input mask

    今天将奉献一个在在几个angularjs项目中抽离的angular组件 input mask.在我们开发中经常会对用户的输入进行控制,比如日期,货币格式,或者纯数字格式之类的限制,这就是input m ...

  3. 案例研究：Web应用间歇性SqlException

    最近有客户找到我,说他们生产环境的事件日志中有下面的报错.要我帮忙找找原因. Event Type: Warning Event Source: ASP.NET 2.0.50727.0 Event C ...

  4. 两段for循环代码的区别

    第一段: #include<iostream>using namespace std;int main(){ int a; int x; for(a=0,x=0;a<=1&& ...

  5. 学习Scala第一篇-从hello World开始

    最近开始系统性的学习scala.其实之前使用过scala的,比如我在用Gatling这款性能测试工具的时候就接触到了scala了.Gatling本身就是用Scala写的,而且Gatling的性能测试配 ...

  6. Lucene系列-分析器

    分析器介绍 搜索的基础是对文本信息进行分析,Lucene的分析工具在org.apache.lucene.analysis包中.分析器负责对文本进行分词.语言处理得到词条,建索引和搜索的时候都需要用到分 ...

  7. 玩转Django的POST请求 CSRF

    玩转Django的POST请求 CSRF 不少麻油们玩django都会碰到这个问题,POST请求莫名其妙的返回 403 foribidden,希望这篇博文能解答所有问题 三种方法 To enable ...

  8. 汇编程序的Hello world

    原文链接:http://www.orlion.ga/989/ 一.汇编程序的Hello world x86 AT&T: .data   msg:       .ascii "Hell ...

  9. 深入理解PHP内核(五)函数的内部结构

    php的函数包括用户定义的函数.内部函数(print_r count...).匿名函数.变量函数($func = 'print_r'; $func(array('a','b'));) PHP内核源码中 ...

  10. javascript类型系统——undefined和null

    × 目录 [1]原因 [2]undefined [3]null 前面的话 一般的程序语言,表示空的只有null,但javascript的设计者Brendan Eich却设计了一个undefined,这 ...