基于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 相关文章推荐
制作特殊字的脚本
Jun 26 Javascript
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
Javascript string 扩展库代码
Apr 09 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
requireJS使用指南
Apr 27 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
详解node中创建服务进程
May 09 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 Javascript
vue.js 中使用(...)运算符报错的解决方法
Aug 09 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
NOT NULL 和NULL
2007/01/15 PHP
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
JS查看对象功能代码
2008/04/25 Javascript
Prototype String对象 学习
2009/07/19 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
2017/12/26 Javascript
python daemon守护进程实现
2016/08/27 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
单位未婚证明范本
2014/01/18 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python
关于mysql中string和number的转换问题
2022/06/14 MySQL