基于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 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
权威JavaScript 中的内存泄露模式
Aug 13 Javascript
jquery tools 系列 scrollable(2)
Sep 06 Javascript
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 Javascript
javascript用函数实现对象的方法
May 14 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
js实现自动轮换选项卡
Jan 13 Javascript
Angular2的管道Pipe的使用方法
Nov 07 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 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
Laravel 5框架学习之子视图和表单复用
2015/04/09 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
javascript import css实例代码
2008/07/18 Javascript
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
ajax分页效果(bootstrap模态框)
2017/01/23 Javascript
EL表达式截取字符串的函数说明
2017/09/22 Javascript
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
一篇文章看懂JavaScript中的回调
2021/01/05 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
2021/02/18 Vue.js
跟老齐学Python之Import 模块
2014/10/13 Python
Python创建xml的方法
2015/03/10 Python
matplotlib简介,安装和简单实例代码
2017/12/26 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
专业求职信撰写要诀
2014/02/18 职场文书
商场收银员岗位职责
2015/04/07 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
贫困证明怎么写
2015/06/16 职场文书
Golang实现AES对称加密的过程详解
2021/05/20 Golang