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多种数据类型表格排序代码分析
Sep 11 Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
jquery form 加载数据示例
Apr 21 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 Javascript
JS中的BOM应用
Feb 02 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
javascript for循环性能测试示例
Aug 07 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 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
也谈截取首页新闻 - 范例
2006/10/09 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
js style动态设置table高度
2014/10/21 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
JavaScript寄生组合式继承实例详解
2018/01/06 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
详解Python之unittest单元测试代码
2018/01/24 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
python利用re,bs4,requests模块获取股票数据
2019/07/29 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
企业统计员岗位职责
2013/12/13 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
Elasticsearch 基本查询和组合查询
2022/04/19 Python
Win2008系统搭建DHCP服务器
2022/06/25 Servers