前台页面

 @{

     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. silverlighter下MVVM模式中利用Behavior和TargetedTriggerAction实现文本框的一些特效

    在silverlight一般开发模式中,给文本框添加一些事件是轻而易举的,然而MVVM开发模式中,想要给文本框添加一些事件并非那么容易,因为MVVM模式中,只有ICommand接口,而且也只有Butt ...

  2. 难道只有我一个人想吐槽npm这种包管理方式么

    实在忍不住吐槽 说实话有强迫症的我忍了很久了,实在是忍不住写篇文章来吐槽一下. 标题可能说的有点大了,我要吐槽的是:我可能只需要某一个小小的功能模块A,结果模块A依赖B-F这5个模块,然后B又依赖这1 ...

  3. 自制Unity小游戏TankHero-2D(3)开始玩起来

    自制Unity小游戏TankHero-2D(3)开始玩起来 我在做这样一个坦克游戏,是仿照(http://game.kid.qq.com/a/20140221/028931.htm)这个游戏制作的.仅 ...

  4. redis系列-redis的使用场景

    redis越来越受大家欢迎,提升下速度,做下缓存,完成KPI之利器呀.翻译一篇文章<<How to take advantage of Redis just adding it to yo ...

  5. Linux网络编程系列-套接口选项控制

    获取和设置套接口选项的方法有: getsockopt/setsockopt fcntl ioctl getsockopt/setsockopt 这两个函数仅用于套接口(socket)的设置,另外两个函 ...

  6. Bootstrap~Panel和Table

    回到目录 在我们对一个页面进行设计时,分块是必须的,没有一个网站是一栏而下的,除非你是在看小说,否则你的页面设计一定是分块的,即它由于多个panel组件,在bootstrap里叫到栅格系统,而在每行每 ...

  7. Node.js与Sails~Model和ORM的持久化

    回到目录 上一讲说了在sails里定义model及相关参数的说明,这一讲主要说一下如何将你的Model持久化到文件,关系数据库和Nosql数据库里,在持久化这点上,sails是统一管理的,它可以在/c ...

  8. 知方可补不足～sqlserver中的几把锁~续

    回到目录 之前写过相关的文章,对脏读,不可重复读,幻读都做了相当的研究,而今天在程序中又出现了这个问题,即当一条数据被update时,另一个线程同时发起了读的操作,这对于序列化级别的事务是不被允许的, ...

  9. ajax图片上传及FastDFS入门案例.

    今天来开始写图片上传的功能, 现在的图片上传都讲求 上传完成后立刻回显且页面不刷新, 这里到底是怎么做的呢? 当然是借助于ajax了, 但是ajax又不能提交表单, 这里我们还要借助一个插件: jqu ...

  10. ToString()的各种用法（大全）

    常用例子: string str = ""; str = .ToString("N"); //生成 12,3456.00 str = .ToString(&qu ...