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 相关文章推荐
权威JavaScript 中的内存泄露模式
Aug 13 Javascript
javascript中bind函数的作用实例介绍
Sep 28 Javascript
javascript+canvas制作九宫格小程序
Dec 28 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
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生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
php calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
jquery中实现简单的tabs插件功能的代码
2011/03/02 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
javascript中常用编程知识
2013/04/08 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
微信小程序自定义组件
2017/08/16 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
Python中type的构造函数参数含义说明
2015/06/21 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
Django 路由控制的实现
2019/07/17 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
网络程序员自荐信
2014/01/25 职场文书
护士先进个人总结
2015/02/13 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL