基于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 相关文章推荐
form中限制文本字节数js代码
Jun 10 Javascript
javascript void(0)的妙用
Oct 21 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
javascript基本类型详解
Nov 28 Javascript
动态加载jQuery的两种方法实例分析
Jul 17 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
vue+element ui实现锚点定位
Jun 29 Vue.js
推荐阅读的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
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
2018/12/03 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
python基础教程之数字处理(math)模块详解
2014/03/25 Python
Python生成数字图片代码分享
2017/10/31 Python
python去掉空白行的多种实现代码
2018/03/19 Python
python通过zabbix api获取主机
2018/09/17 Python
Python变量类型知识点总结
2019/02/18 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
python ubplot使用方法解析
2020/01/10 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
德国苹果商店:MacTrade
2020/05/18 全球购物
读书心得体会
2013/12/28 职场文书
五一家具促销方案
2014/01/10 职场文书
五一服装活动方案
2014/01/11 职场文书
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
新闻学专业个人求职信写作
2014/02/04 职场文书
调解协议书
2014/04/16 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
python pygame入门教程
2021/06/01 Python