jquery插件uploadify实现带进度条的文件批量上传


Posted in Javascript onDecember 13, 2015

有时项目中需要一个文件批量上传功能时,个人认为uploadify是快速简便的解决方案,分享给大家供大家参考,具体如下

先上效果图:

jquery插件uploadify实现带进度条的文件批量上传

jquery插件uploadify实现带进度条的文件批量上传

具体代码如下:

在页面中如下

jquery插件uploadify实现带进度条的文件批量上传

完整页面代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>文件批量上传Demo</title>
 <!--引入Jquery-->
 <script src="js/jquery-1.11.3.min.js"></script>
 <!--引入uploadify-->
 <script type="text/javascript" src="uploadify/jquery.uploadify.js"></script>
 <link type="text/css" href="uploadify/uploadify.css" rel="stylesheet" />

 <script type="text/javascript">
  $(function () {
   var guid = '<%=Request["guid"] %>';
   var type = '<%=Request["type"] %>';
   if (guid == null || guid == "") {
    guid = newGuid();
   }
   if (type != null) {
    type = type + '/';
   }

   $('#file_upload').uploadify({
    'swf': 'uploadify/uploadify.swf',    //FLash文件路径
    'buttonText': '浏 览',      //按钮文本
    'uploader': 'uploadhandler.ashx?guid=' + guid, //处理ASHX页面
    'formData': { 'folder': 'picture', 'isCover': 1 },   //传参数
    'queueID': 'fileQueue',      //队列的ID
    'queueSizeLimit': 10,       //队列最多可上传文件数量,默认为999
    'auto': false,         //选择文件后是否自动上传,默认为true
    'multi': true,         //是否为多选,默认为true
    'removeCompleted': true,      //是否完成后移除序列,默认为true
    'fileSizeLimit': '0',       //单个文件大小,0为无限制,可接受KB,MB,GB等单位的字符串值
    'fileTypeDesc': 'All Files',     //文件描述
    'fileTypeExts': '*.*',       //上传的文件后缀过滤器
    'onQueueComplete': function (queueData) {  //所有队列完成后事件
     alert("上传完毕!");
    },
    'onError': function (event, queueId, fileObj, errorObj) {
     alert(errorObj.type + ":" + errorObj.info);
    },
    'onUploadStart': function (file) {
    },
    'onUploadSuccess': function (file, data, response) { //一个文件上传成功后的响应事件处理
     //var data = $.parseJSON(data);//如果data是json格式
     //var errMsg = "";
    }

   });
  });

  function newGuid() {
   var guid = "";
   for (var i = 1; i <= 32; i++) {
    var n = Math.floor(Math.random() * 16.0).toString(16);
    guid += n;
    if ((i == 8) || (i == 12) || (i == 16) || (i == 20))
     guid += "-";
   }
   return guid;
  }

  //执行上传
  function doUpload() {
   $('#file_upload').uploadify('upload', '*');
  }
 </script>

</head>
<body>
 <form id="form1" runat="server" enctype="multipart/form-data">
  <div id="fileQueue" class="fileQueue"></div>
  <div>
   <input type="file" name="file_upload" id="file_upload" />
   <p>
    <input type="button" class="shortbutton" id="btnUpload" onclick="doUpload()" value="上传" />
        
    <input type="button" class="shortbutton" id="btnCancelUpload" onclick="$('#file_upload').uploadify('cancel')" value="取消" />
   </p>
   <div id="div_show_files"></div>
  </div>
 </form>
</body>
</html>

UploadHandler.ashx代码:

using System;
using System.Web;
using System.IO;

public class UploadHandler : IHttpHandler {
 
 public void ProcessRequest (HttpContext context) {
  context.Response.ContentType = "text/plain";
  context.Request.ContentEncoding = System.Text.Encoding.GetEncoding("UTF-8");
  context.Response.ContentEncoding = System.Text.Encoding.GetEncoding("UTF-8");
  context.Response.Charset = "UTF-8";

  if (context.Request.Files.Count > 0)
  {
   #region 获取上传路径
   string uploadFolder = GetUploadFolder();
   #endregion

   if (System.IO.Directory.Exists(uploadFolder))
   {//如果上传路径存在
    HttpPostedFile file = context.Request.Files["Filedata"];
    string filePath = Path.Combine(uploadFolder, file.FileName);
    file.SaveAs(filePath);
    context.Response.Write("0");
   }
   else
   {
    context.Response.Write("2");
   }
  }
 }
 
 public bool IsReusable {
  get {
   return false;
  }
 }

 /// <summary>
 /// 返回不带后缀的文件名
 /// </summary>
 /// <param name="fileName"></param>
 /// <returns></returns>
 public static string GetFirstFileName(string fileName)
 {
  return Path.GetFileNameWithoutExtension(fileName);
 }

 /// <summary>
 /// 获取上传目录
 /// </summary>
 /// <returns></returns>
 public static string GetUploadFolder()
 {
  string rootPath = HttpContext.Current.Server.MapPath("~");
  return Path.Combine(rootPath, "test");
 }

}

文件上传.NET默认有大小限制,像IIS限制的30M默认请求大小。如果不想修改IIS,又想突破这个大小的限制,比如上传1GB大小的文件。

这是修改Web.config即可实现。

<?xml version="1.0" encoding="utf-8"?>

<!--
 -->

<configuration>

 <system.web>
  <compilation debug="true" targetFramework="4.0" />
  <httpRuntime maxRequestLength="1073741824"/>
 </system.web>

 <!--用于设置文件上传的最大允许大小(单位:bytes)-->
 <system.webServer>
  <security>
  <requestFiltering>
   <!--修改服务器允许最大长度(1GB)-->
   <requestLimits maxAllowedContentLength="1073741824"/>
  </requestFiltering>
  </security>
 </system.webServer>
 
</configuration>

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
9个JavaScript评级/投票插件
Jan 18 Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
May 19 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
JavaScript自学笔记(必看篇)
Jun 23 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 Javascript
JavaScript实现网页下拉菜单效果
Nov 20 Javascript
canvas绘制折线路径动画实现
May 12 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 #Javascript
JavaScript模块化开发之SeaJS
Dec 13 #Javascript
node.js require() 源码解读
Dec 13 #Javascript
JavaScript 模块的循环加载实现方法
Dec 13 #Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 #Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 #Javascript
详解JavaScript基于面向对象之继承
Dec 13 #Javascript
You might like
php图片验证码代码
2008/03/27 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
jQuery图片预加载 等比缩放实现代码
2011/10/04 Javascript
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
2013/03/19 Javascript
jquery选择器、属性设置用法经验总结
2013/09/08 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
JavaScript_object基础入门(必看篇)
2016/06/13 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
详解ES6中的三种异步解决方案
2018/06/28 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
python取代netcat过程分析
2018/02/10 Python
Python requests发送post请求的一些疑点
2018/05/20 Python
python调用百度语音REST API
2018/08/30 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
Python单元和文档测试实例详解
2019/04/11 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
AJax面试题
2014/11/25 面试题
2014年五四青年节活动策划书
2014/04/22 职场文书
法院授权委托书范文
2014/08/02 职场文书
教师三严三实心得体会
2014/10/11 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
小学副班长竞选稿
2015/11/21 职场文书
小学新课改心得体会
2016/01/22 职场文书
Python学习之异常中的finally使用详解
2022/03/16 Python
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB