基于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 相关文章推荐
将函数的实际参数转换成数组的方法
Jan 25 Javascript
jquery插件制作 图片走廊 gallery
Aug 17 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
Jan 14 Javascript
JavaScript的事件代理和委托实例分析
Mar 25 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
JS高级运动实例分析
Dec 20 Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 Javascript
总结javascript三元运算符知识点
Sep 28 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
简单了解node npm cnpm的具体使用方法
Feb 27 Javascript
vue 数据操作相关总结
Dec 17 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
PHP中创建并处理图象
2006/10/09 PHP
PHP脚本数据库功能详解(中)
2006/10/09 PHP
PHP与Java进行通信的实现方法
2013/10/21 PHP
PHP实现定时执行任务的方法
2014/10/05 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python的类变量和成员变量用法实例教程
2014/08/25 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
python实现求特征选择的信息增益
2018/12/18 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
Ajax的优点和缺点
2014/11/21 面试题
思想汇报格式
2014/01/05 职场文书
小孩百日宴答谢词
2014/01/15 职场文书
机关门卫制度
2014/02/01 职场文书
带薪年假请假条
2014/02/04 职场文书
社区禁毒工作方案
2014/06/02 职场文书
计算机求职信
2014/07/02 职场文书
班级体育活动总结
2014/07/05 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
如何在Python中创建二叉树
2021/03/30 Python
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技