基于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 相关文章推荐
引用 js在IE与FF之间的区别详细解析
Nov 20 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
js实现文本框宽度自适应文本宽度的方法
Aug 13 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
vue 设置路由的登录权限的方法
Jul 03 Javascript
iView框架问题整理小结
Oct 16 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
Vue中通过Vue.extend动态创建实例的方法
Aug 13 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读取文件内容后清空文件示例代码
2014/03/18 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
Javascript 继承机制的实现
2009/08/12 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
js中的数组对象排序分析
2018/12/11 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
python求解水仙花数的方法
2015/05/11 Python
Python内建函数之raw_input()与input()代码解析
2017/10/26 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
python 爬取疫情数据的源码
2020/02/09 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
工程概预算专业毕业生求职信
2013/10/04 职场文书
网站设计师的岗位职责
2013/11/21 职场文书
临床医师个人自我评价
2014/04/06 职场文书
《春雨》教学反思
2014/04/24 职场文书
节能环保口号
2014/06/12 职场文书
2014年妇女工作总结
2014/12/06 职场文书
管理人员岗位职责
2015/02/14 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
入党转正申请报告
2015/05/15 职场文书
家长会感言
2015/08/01 职场文书
react antd实现动态增减表单
2021/06/03 Javascript
基于JavaScript实现省市联动效果
2021/06/22 Javascript
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫
Python读取和写入Excel数据
2022/04/20 Python