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 相关文章推荐
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
基于jquery自定义图片热区效果
Jul 21 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
jQuery中height()方法用法实例
Dec 24 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
详解jQuery事件
Jan 13 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
node.js基于socket.io快速实现一个实时通讯应用
Apr 23 Javascript
JavaScript嵌入百度地图API的最详细方法
Apr 16 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制作静态网站的模板框架
2006/10/09 PHP
用PHP实现小型站点广告管理(修正版)
2006/10/09 PHP
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
js 金额文本框实现代码
2012/02/14 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
canvas绘制多边形
2017/02/24 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
Vue中props的使用详解
2018/06/15 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
网络工程师专家职业发展路线
2014/02/14 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
针对吵架老公保证书
2015/05/08 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android
python 单机五子棋对战游戏
2022/04/28 Python