基于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页面不刷新时全选择,全删除(GridView)
Apr 14 Javascript
基于JQuery的抓取博客园首页RSS的代码
Dec 01 Javascript
js下拉菜单语言选项简单实现
Sep 23 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 Javascript
理解javascript中的with关键字
Feb 15 Javascript
js+html5实现canvas绘制网页时钟的方法
May 21 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 Javascript
解决vue项目中出现Invalid Host header的问题
Nov 17 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实现session自定义会话处理器的方法
2015/01/27 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
react-native封装插件swiper的使用方法
2018/03/20 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
pytorch进行上采样的种类实例
2020/02/18 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
Python with语句用法原理详解
2020/07/03 Python
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
心理健康心得体会
2014/01/02 职场文书
美容院经理岗位职责
2014/04/03 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL