基于jQuery通过jQuery.form.js插件实现异步上传


Posted in Javascript onDecember 13, 2015

本文主要从前台和后台代码分析了jquery.form.js实现异步上传的方法,分享给大家,具体代码如下

前台代码:

@{
 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 = 0; i < filesList.Count; i++)
   {
    var file = filesList[i];
    if (file.ContentLength > 0)
    {
     if (file.ContentLength > 5242880)
     {
      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实现异步上传的方法,希望对大家的学习有所帮助。

Javascript 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
JS获取当前日期和时间的简单实例
Nov 19 Javascript
javascript 实现 原路返回
Jan 21 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
ReactNative之FlatList的具体使用方法
Nov 29 Javascript
详解小程序不同页面之间通讯的解决方案
Nov 23 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 Javascript
layui使用templet格式化表格数据的方法
Sep 16 Javascript
node.js基础知识汇总
Aug 25 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 #Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 #Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 #Javascript
JavaScript文档碎片操作实例分析
Dec 12 #Javascript
javascript性能优化之事件委托实例详解
Dec 12 #Javascript
jsonp跨域请求数据实现手机号码查询实例分析
Dec 12 #Javascript
jQuery Validate初步体验(二)
Dec 12 #Javascript
You might like
PHP完整的日历类(CLASS)
2006/11/27 PHP
PHP 变量的定义方法
2010/01/26 PHP
php中大括号作用介绍
2012/03/22 PHP
php缓冲输出实例分析
2015/01/05 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
50个比较实用jQuery代码段
2011/09/18 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
Vue按需加载的具体实现
2017/12/02 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
js html实现计算器功能
2018/11/13 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
杭州联环马网络笔试题面试题
2013/08/04 面试题
小学少先队活动方案
2014/02/18 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
车间安全生产标语
2014/06/06 职场文书
雾霾停课通知
2015/04/24 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书