前台页面

 @{

     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. dojo/query源码解析

    dojo/query模块是dojo为开发者提供的dom查询接口.该模块的输出对象是一个使用css选择符来查询dom元素并返回NodeList对象的函数.同时,dojo/query模块也是一个插件,开发 ...

  2. [.net 面向对象程序设计进阶] (5) Lamda表达式(一) 创建委托

    [.net 面向对象程序设计进阶] (5) Lamda表达式(一)  创建委托 本节导读: 通过学习Lambda表达式,学会创建委托和表达式目录树,深入了解Lambda的特性,让你的代码变的更加清晰. ...

  3. Javascript事件模型系列（一）事件及事件的三种模型

    一.开篇 在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加 ...

  4. Ubuntu环境搭建系列—JavaEE篇

    恩,其实我是一时兴起,所以就写了目前这几篇环境的博文,希望能给自己做一个笔记,同时也能够给一些新手带来一些帮助,不会在配置方面那么迷茫.本篇文章主要就是针对Java web开发进行环境搭建. 一.To ...

  5. IOS Socket 02-Socket基础知识

    1. 简介 Socket就是为网络服务提供的一种机制 通信的两端都是Socket 网络通信其实就是Socket间的通信 数据在两个Socket间通过IO传输 2. Socket通信流程图 3. 模拟Q ...

  6. Redis中统计各种数据大小的方法

    转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/125.html?1455853369如果 MySQL 数据库比较大的话,我 ...

  7. Lua标准库- 模块(Modules)

    Lua包库为lua提供简易的加载及创建模块的方法,由require.module方法及package表组成 1.module (name [, ···]) 功能:建立一个模块. module的处理流程 ...

  8. salesforce 零基础开发入门学习（十五）salesforce中formula的使用（不含Date/Time）

    本文参考官方的formula介绍PDF:https://resources.docs.salesforce.com/200/latest/en-us/sfdc/pdf/salesforce_usefu ...

  9. KnockoutJS 3.X API 第五章 高级应用(1) 创建自定义绑定

    您不仅限于使用内置的绑定,如click,value绑定等,您可以创建自己的绑定. 这是如何控制视图模型如何与DOM元素进行交互,并且为您提供了大量的灵活性,以便于以复用的方式封装复杂的行为. 注册绑定 ...

  10. CSS3 transform 属性详解(skew, rotate, translate, scale)

    写这篇文章是因为在一个前端QQ群里,网友 "小豆豆" (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了很多文章还是不能理解skew的原理.于是,我觉得有 ...