asp.net uploadify實現(xiàn)多附件上傳功能
更新時間：2016年11月10日 09:54:45 作者：冷戰(zhàn)
這篇文章主要為大家詳細(xì)介紹了asp.net uploadify實現(xiàn)多附件上傳功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了asp.net uploadify多附件上傳的方法，供大家參考，具體內(nèi)容如下
1、說明
uploadify是一款優(yōu)秀jQuery插件，主要功能是批量上傳文件。大多數(shù)同學(xué)對多附件上傳感到棘手，現(xiàn)將asp.net結(jié)合uploadfiy如何實現(xiàn)批量上傳附件給大家講解一下，有什么不對的地方還請大家多多交流溝通，下面把代碼貼出來大家一起交流。
2、組成
首先說明一下代碼實現(xiàn)所用到的技術(shù)，僅供參考：
開發(fā)工具：vs2010
目標(biāo)框架：.NET Framework3.5
Uploadify：uploadify-v3.1
Jquery：jquery-1.8.1.js
最后我會將整個Demo上傳，如果同學(xué)們的電腦上有開發(fā)環(huán)境可直接打開項目解決方案運行。
3、代碼
Default.aspx（測試頁面）
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FileUpload._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>附件上傳</title>
<script src="Scripts/jquery-1.8.1.js" type="text/javascript"></script>
<script src="Scripts/uploadify-v3.1/jquery.uploadify-3.1.js" type="text/javascript"></script>
<link href="Scripts/uploadify-v3.1/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#file_upload").uploadify({
"auto": false,
"swf": "Scripts/uploadify-v3.1/uploadify.swf",
"uploader": "App_Handler/Uploadify.ashx?action=upload",
"removeCompleted": false,
"onUploadSuccess": function (file, data, response) {
alert('文件 ' + file.name + ' 已經(jīng)上傳成功，并返回 ' + response + ' 服務(wù)器狀態(tài) ' + data);
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="file" id="file_upload" name="file_upload" />
</div>
<div>
<a href="javascript:$('#file_upload').uploadify('upload');">上傳第一個</a>
<a href="javascript:$('#file_upload').uploadify('upload','*');">上傳隊列</a>
<a href="javascript:$('#file_upload').uploadify('cancel');">取消第一個</a>
<a href="javascript:$('#file_upload').uploadify('cancel', '*');">取消隊列</a>
</div>
</form>
</body>
</html>
Uploadify.ashx（一般處理程序）
<%@ WebHandler Language="C#" Class="UploadifyUpload" %>
using System;
using System.Collections;
using System.Data;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.SessionState;
using System.IO;
using System.Collections.Generic;
using System.Web.UI.WebControls;
using System.Text;
public class UploadifyUpload : IHttpHandler, IRequiresSessionState
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Charset = "utf-8";
string action = context.Request["action"];
switch (action)
{
case "upload":
//上傳附件
upload(context);
break;
}
context.Response.End();
}
/// <summary>
/// 上傳附件
/// </summary>
/// <param name="context"></param>
private void upload(HttpContext context)
{
HttpPostedFile postedFile = context.Request.Files["Filedata"];
if (postedFile != null)
{
string fileName, fileExtension;
int fileSize;
fileName = postedFile.FileName;
fileSize = postedFile.ContentLength;
if (fileName != "")
{
fileExtension = postedFile.FileName.Substring(postedFile.FileName.LastIndexOf('.'));
string path =context.Server.MapPath("/")+ "\\App_Attachments\\";//設(shè)置文件的路徑
string fileUrl = path + DateTime.Now.ToString("yyyyMMddHHmmss") + fileExtension;//保存文件路徑
if (!Directory.Exists(path)) {
Directory.CreateDirectory(path);
}
postedFile.SaveAs(fileUrl);//先保存源文件
context.Response.Write("上傳成功！");
}
else
{
context.Response.Write("上傳失敗！");
}
}
else
{
context.Response.Write("上傳失??！");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
4、補充
給大家貼出一些uploadfiy參數(shù)的講解，使用方法就是在Default.aspx測試頁面里面$("#file_upload").uploadify({});方法中配置，不論參數(shù)或事件配置要以英文狀態(tài)下的逗號結(jié)束，最后一個不需要逗號結(jié)束。類似于下圖
詳細(xì)參數(shù)如下：
// 所需的參數(shù)
id: $this.attr('id'), // DOM對象的ID
swf: 'Scripts/jquery-uploadify/uploadify.swf', // uploadify.swf 文件的路徑
uploader: 'App_Handler/Uploadify.ashx', // 后臺處理程序的相對路徑
auto: false, // 設(shè)置為true當(dāng)選擇文件后就直接上傳了，為false需要點擊上傳按鈕才上傳，這里執(zhí)行doUpload()方法
buttonClass: '', // 按鈕樣式
buttonCursor: 'hand', // 鼠標(biāo)指針懸停在按鈕上的樣子
buttonImage: null, // 瀏覽按鈕的圖片的路徑
buttonText: '選擇文件', // 瀏覽按鈕的文本
checkExisting: false, // 文件上傳重復(fù)性檢查程序，檢查即將上傳的文件在服務(wù)器端是否已存在，存在返回1，不存在返回0
debug: false, // 如果設(shè)置為true則表示啟用SWFUpload的調(diào)試模式
fileObjName: 'Filedata', // 文件上傳對象的名稱，如果命名為'the_files'，PHP程序可以用$_FILES['the_files']來處理上傳的文件對象
fileSizeLimit: '5MB', // 上傳文件的大小限制 ，如果為整數(shù)型則表示以KB為單位的大小，如果是字符串，則可以使用(B, KB, MB, or GB)為單位，比如'2MB'；如果設(shè)置為0則表示無限制
fileTypeDesc: '支持的格式：', // 這個屬性值必須設(shè)置fileTypeExts屬性后才有效，用來設(shè)置選擇文件對話框中的提示文本，如設(shè)置fileTypeDesc為“請選擇rar doc pdf文件”
fileTypeExts: '*.*', // 設(shè)置可以選擇的文件的類型，格式如：'*.doc;*.pdf;*.rar'
height: 24, // 設(shè)置瀏覽按鈕的高度 ，默認(rèn)值
itemTemplate: false, // 用于設(shè)置上傳隊列的HTML模版，可以使用以下標(biāo)簽：instanceID – Uploadify實例的ID fileID – 列隊中此文件的ID,或者理解為此任務(wù)的ID fileName – 文件的名稱 fileSize – 當(dāng)前上傳文件的大小 插入模版標(biāo)簽時使用格式如：${fileName}
method: 'post', // 提交方式Post或Get
multi: true, // 設(shè)置為true時可以上傳多個文件
formData: { 'action': 'upload' }, // AnJSON格式上傳每個文件的同時提交到服務(wù)器的額外數(shù)據(jù)，可在'onUploadStart'事件中使用'settings'方法動態(tài)設(shè)置
preventCaching: true, // 如果為true，則每次上傳文件時自動加上一串隨機字符串參數(shù)，防止URL緩存影響上傳結(jié)果
progressData: 'percentage', // 設(shè)置上傳進(jìn)度顯示方式，percentage顯示上傳百分比，speed顯示上傳速度
listID: false, // 設(shè)置附件列表容器DOM元素的ID
queueID: false, // 設(shè)置上傳隊列容器DOM元素的ID，如果為false則自動生成一個隊列容器
queueSizeLimit: 999, // 隊列最多顯示的任務(wù)數(shù)量，如果選擇的文件數(shù)量超出此限制，將會出發(fā)onSelectError事件。注意此項并非最大文件上傳數(shù)量，如果要限制最大上傳文件數(shù)量，應(yīng)設(shè)置uploadLimit
removeCompleted: false, // 是否自動將已完成任務(wù)從隊列中刪除，如果設(shè)置為ture則會從隊列中移除
removeTimeout: 3, // 如果設(shè)置了任務(wù)完成后自動從隊列中移除，則可以規(guī)定從完成到被移除的時間間隔
requeueErrors: false, // 如果設(shè)置為true，則單個任務(wù)上傳失敗后將返回錯誤，并重新加入任務(wù)隊列上傳
successTimeout: 30, // 文件上傳成功后服務(wù)端應(yīng)返回成功標(biāo)志，此項設(shè)置返回結(jié)果的超時時間
uploadLimit: 0, // 最大上傳文件數(shù)量，如果達(dá)到或超出此限制將會觸發(fā)onUploadError事件
width: 75, // 設(shè)置文件瀏覽按鈕的寬度
設(shè)置的事件：
onDialogClose : function(swfuploadifyQueue) {//當(dāng)文件選擇對話框關(guān)閉時觸發(fā)
if( swfuploadifyQueue.filesErrored > 0 ){
alert( '添加至隊列時有'
+swfuploadifyQueue.filesErrored
+'個文件發(fā)生錯誤n'
+'錯誤信息:'
+swfuploadifyQueue.errorMsg
+'n選定的文件數(shù):'
+swfuploadifyQueue.filesSelected
+'n成功添加至隊列的文件數(shù):'
+swfuploadifyQueue.filesQueued
+'n隊列中的總文件數(shù)量:'
+swfuploadifyQueue.queueLength);
}
}
onDialogOpen : function() {//當(dāng)選擇文件對話框打開時觸發(fā)
alert( 'Open!');
}
onSelect : function(file) {//當(dāng)每個文件添加至隊列后觸發(fā)
alert( 'id: ' + file.id
+ ' - 索引: ' + file.index
+ ' - 文件名: ' + file.name
+ ' - 文件大小: ' + file.size
+ ' - 類型: ' + file.type
+ ' - 創(chuàng)建日期: ' + file.creationdate
+ ' - 修改日期: ' + file.modificationdate
+ ' - 文件狀態(tài): ' + file.filestatus);
}
onSelectError : function(file,errorCode,errorMsg) {//當(dāng)文件選定發(fā)生錯誤時觸發(fā)
alert( 'id: ' + file.id
+ ' - 索引: ' + file.index
+ ' - 文件名: ' + file.name
+ ' - 文件大小: ' + file.size
+ ' - 類型: ' + file.type
+ ' - 創(chuàng)建日期: ' + file.creationdate
+ ' - 修改日期: ' + file.modificationdate
+ ' - 文件狀態(tài): ' + file.filestatus
+ ' - 錯誤代碼: ' + errorCode
+ ' - 錯誤信息: ' + errorMsg);
}
onQueueComplete : function(stats) {//當(dāng)隊列中的所有文件全部完成上傳時觸發(fā)
alert( '成功上傳的文件數(shù): ' + stats.successful_uploads
+ ' - 上傳出錯的文件數(shù): ' + stats.upload_errors
+ ' - 取消上傳的文件數(shù): ' + stats.upload_cancelled
+ ' - 出錯的文件數(shù)' + stats.queue_errors);
}
onUploadComplete : function(file,swfuploadifyQueue) {//隊列中的每個文件上傳完成時觸發(fā)一次
alert( 'id: ' + file.id
+ ' - 索引: ' + file.index
+ ' - 文件名: ' + file.name
+ ' - 文件大小: ' + file.size
+ ' - 類型: ' + file.type
+ ' - 創(chuàng)建日期: ' + file.creationdate
+ ' - 修改日期: ' + file.modificationdate
+ ' - 文件狀態(tài): ' + file.filestatus
+ ' - 出錯的文件數(shù): ' + swfuploadifyQueue.filesErrored
+ ' - 錯誤信息: ' + swfuploadifyQueue.errorMsg
+ ' - 要添加至隊列的數(shù)量: ' + swfuploadifyQueue.filesSelected
+ ' - 添加至對立的數(shù)量: ' + swfuploadifyQueue.filesQueued
+ ' - 隊列長度: ' + swfuploadifyQueue.queueLength);
}
onUploadError : function(file,errorCode,errorMsg,errorString,swfuploadifyQueue) {//上傳文件出錯是觸發(fā)（每個出錯文件觸發(fā)一次）
alert( 'id: ' + file.id
+ ' - 索引: ' + file.index
+ ' - 文件名: ' + file.name
+ ' - 文件大小: ' + file.size
+ ' - 類型: ' + file.type
+ ' - 創(chuàng)建日期: ' + file.creationdate
+ ' - 修改日期: ' + file.modificationdate
+ ' - 文件狀態(tài): ' + file.filestatus
+ ' - 錯誤代碼: ' + errorCode
+ ' - 錯誤描述: ' + errorMsg
+ ' - 簡要錯誤描述: ' + errorString
+ ' - 出錯的文件數(shù): ' + swfuploadifyQueue.filesErrored
+ ' - 錯誤信息: ' + swfuploadifyQueue.errorMsg
+ ' - 要添加至隊列的數(shù)量: ' + swfuploadifyQueue.filesSelected
+ ' - 添加至對立的數(shù)量: ' + swfuploadifyQueue.filesQueued
+ ' - 隊列長度: ' + swfuploadifyQueue.queueLength);
}
onUploadProgress : function(file,fileBytesLoaded,fileTotalBytes,
queueBytesLoaded,swfuploadifyQueueUploadSize) {//上傳進(jìn)度發(fā)生變更時觸發(fā)
alert( 'id: ' + file.id
+ ' - 索引: ' + file.index
+ ' - 文件名: ' + file.name
+ ' - 文件大小: ' + file.size
+ ' - 類型: ' + file.type
+ ' - 創(chuàng)建日期: ' + file.creationdate
+ ' - 修改日期: ' + file.modificationdate
+ ' - 文件狀態(tài): ' + file.filestatus
+ ' - 當(dāng)前文件已上傳: ' + fileBytesLoaded
+ ' - 當(dāng)前文件大小: ' + fileTotalBytes
+ ' - 隊列已上傳: ' + queueBytesLoaded
+ ' - 隊列大小: ' + swfuploadifyQueueUploadSize);
}
onUploadStart: function(file) {//上傳開始時觸發(fā)（每個文件觸發(fā)一次）
alert( 'id: ' + file.id
+ ' - 索引: ' + file.index
+ ' - 文件名: ' + file.name
+ ' - 文件大小: ' + file.size
+ ' - 類型: ' + file.type
+ ' - 創(chuàng)建日期: ' + file.creationdate
+ ' - 修改日期: ' + file.modificationdate
+ ' - 文件狀態(tài): ' + file.filestatus );
}
onUploadSuccess : function(file,data,response) {//上傳完成時觸發(fā)（每個文件觸發(fā)一次）
alert( 'id: ' + file.id
+ ' - 索引: ' + file.index
+ ' - 文件名: ' + file.name
+ ' - 文件大小: ' + file.size
+ ' - 類型: ' + file.type
+ ' - 創(chuàng)建日期: ' + file.creationdate
+ ' - 修改日期: ' + file.modificationdate
+ ' - 文件狀態(tài): ' + file.filestatus
+ ' - 服務(wù)器端消息: ' + data
+ ' - 是否上傳成功: ' + response);
}
5、最后奉上Demo：FileUpload
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
通過Windows Visual Studio遠(yuǎn)程調(diào)試WSL2中的.NET Core Linux應(yīng)用程序的方法
這篇文章主要介紹了通過Windows Visual Studio遠(yuǎn)程調(diào)試WSL2中的.NET Core Linux應(yīng)用程序的方法，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
這個方法絕對it560原創(chuàng)，而且會讓大家少走彎路，對于網(wǎng)上流傳的webconfig配置錯誤的說法絕對是忽悠人，配置文件錯誤的記錄大概是0.1%2010-06-06
ASP.NET Core自動生成小寫破折號路由的實現(xiàn)方法
這篇文章主要介紹了ASP.NET Core自動生成小寫破折號路由的實現(xiàn)方法，幫助大家更好的理解和學(xué)習(xí)使用ASP.NET Core，感興趣的朋友可以了解下2021-04-04
ASP.NET State service狀態(tài)服務(wù)的問題解決方法
每次重啟機器以后，在.NET2005上跑Web程序老是遇到這樣的問題2008-11-11
這個STA線程模型，在線程內(nèi)加入了訊息幫浦等等機制，減少開發(fā)人員撰寫窗口程序的工作量2013-05-05
asp.net后臺如何輸出js腳本使用什么方法可以實現(xiàn)
asp.net后臺如何輸出js腳本，用page.ClientScript.RegisterStartupScript方式實現(xiàn)，實現(xiàn)示例如下，感興趣的朋友不要錯過2014-01-01
uniapp+.net?core實現(xiàn)微信小程序獲取手機號功能
這篇文章主要介紹了uniapp+.net?core實現(xiàn)微信小程序獲取手機號功能，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
本文詳細(xì)講解了C#使用Unity實現(xiàn)IOC的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
本篇文章，小編將為大家介紹，關(guān)于asp.net 自定義分頁控件，有需要的朋友可以參考一下2013-04-04
.Net core下直接執(zhí)行SQL語句并生成DataTable的實現(xiàn)方法
.net core可以執(zhí)行SQL語句，但是只能生成強類型的返回結(jié)果。這篇文章主要介紹了.Net core下直接執(zhí)行SQL語句并生成DataTable的相關(guān)資料,需要的朋友可以參考下2016-11-11