基于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 相关文章推荐
javascript开发中因空格引发的错误
Nov 08 Javascript
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
深入理解jQuery()方法的构建原理
Dec 05 Javascript
解析vue路由异步组件和懒加载案例
Jun 08 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
Vue数据双向绑定的深入探究
Nov 27 Javascript
vue使用video.js进行视频播放功能
Jul 18 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 Javascript
关于ES6尾调用优化的使用
Sep 11 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
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
生成静态页面的php函数,php爱好者站推荐
2007/03/19 PHP
php win下Socket方式发邮件类
2009/08/21 PHP
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
Javascript动态创建div的方法
2015/02/09 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
Vue axios设置访问基础路径方法
2018/09/19 Javascript
原生js实现二级联动菜单
2019/11/27 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
详解Python文本操作相关模块
2017/06/22 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
Django通过json格式收集主机信息
2020/05/29 Python
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
详解HTML5中的标签
2015/06/19 HTML / CSS
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
介绍下static、final、abstract区别
2015/01/30 面试题
少年闰土教学反思
2014/02/22 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
社区务虚会发言材料
2014/10/20 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
小平小道观后感
2015/06/09 职场文书
亲戚关系证明
2015/06/24 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
高三数学教学反思
2016/02/18 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
Pygame Draw绘图函数的具体使用
2021/11/17 Python
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android