星空网 > 软件开发 > Java

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

有时项目中需要一个文件批量上传功能时,个人认为uploadify是快速简便的解决方案。

先上效果图:

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

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

一. 下载uploadify

从官网下载uploadify的Flash版本(Flash版本免费,另一版本HTML5版本需要付费)

下载地址: http://www.uploadify.com/download/

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

下载后直接把文件解压,然后放在项目中

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

二. 在项目中使用

在页面中引入:

  <!--引入Jquery-->  <script src='/images/loading.gif' data-original="js/jquery-1.11.3.min.js"></script>  <!--引入uploadify-->  <script type="text/javascript" src='/images/loading.gif' data-original="uploadify/jquery.uploadify.js"></script>  <link type="text/css" href="uploadify/uploadify.css" rel="stylesheet" />

完整页面代码

带进度条的文件批量上传插件uploadify带进度条的文件批量上传插件uploadify
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html><html ="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='/images/loading.gif' data-original="js/jquery-1.11.3.min.js"></script>  <!--引入uploadify-->  <script type="text/javascript" src='/images/loading.gif' data-original="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="上传" />        &nbsp;&nbsp;&nbsp;&nbsp;        <input type="button" class="shortbutton" id="btnCancelUpload" onclick="$('#file_upload').uploadify('cancel')" value="取消" />      </p>      <div id="div_show_files"></div>    </div>  </form></body></html>

View Code

UploadHandler.ashx代码

带进度条的文件批量上传插件uploadify带进度条的文件批量上传插件uploadify
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");  }}

View Code

Demo下载

三. 延伸和总结

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

这时修改Web.config即可实现

<?"1.0" encoding="utf-8"?><!-- 有关如何配置 ASP.NET 应用程序的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkId=169433 --><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>

希望本文对你有帮助。




原标题:带进度条的文件批量上传插件uploadify

关键词:上传

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流