asp.net uploadify實(shí)現(xiàn)多附件上傳功能
本文實(shí)例為大家分享了asp.net uploadify多附件上傳的方法,供大家參考,具體內(nèi)容如下
1、說明
uploadify是一款優(yōu)秀jQuery插件,主要功能是批量上傳文件。大多數(shù)同學(xué)對多附件上傳感到棘手,現(xiàn)將asp.net結(jié)合uploadfiy如何實(shí)現(xiàn)批量上傳附件給大家講解一下,有什么不對的地方還請大家多多交流溝通,下面把代碼貼出來大家一起交流。
2、組成
首先說明一下代碼實(shí)現(xiàn)所用到的技術(shù),僅供參考:
開發(fā)工具:vs2010
目標(biāo)框架:.NET Framework3.5
Uploadify:uploadify-v3.1
Jquery:jquery-1.8.1.js
最后我會(huì)將整個(gè)Demo上傳,如果同學(xué)們的電腦上有開發(fā)環(huán)境可直接打開項(xiàng)目解決方案運(yù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');">上傳第一個(gè)</a> <a href="javascript:$('#file_upload').uploadify('upload','*');">上傳隊(duì)列</a> <a href="javascript:$('#file_upload').uploadify('cancel');">取消第一個(gè)</a> <a href="javascript:$('#file_upload').uploadify('cancel', '*');">取消隊(duì)列</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、補(bǔ)充
給大家貼出一些uploadfiy參數(shù)的講解,使用方法就是在Default.aspx測試頁面里面$("#file_upload").uploadify({});方法中配置,不論參數(shù)或事件配置要以英文狀態(tài)下的逗號結(jié)束,最后一個(gè)不需要逗號結(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需要點(diǎn)擊上傳按鈕才上傳,這里執(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: '支持的格式:', // 這個(gè)屬性值必須設(shè)置fileTypeExts屬性后才有效,用來設(shè)置選擇文件對話框中的提示文本,如設(shè)置fileTypeDesc為“請選擇rar doc pdf文件” fileTypeExts: '*.*', // 設(shè)置可以選擇的文件的類型,格式如:'*.doc;*.pdf;*.rar' height: 24, // 設(shè)置瀏覽按鈕的高度 ,默認(rèn)值 itemTemplate: false, // 用于設(shè)置上傳隊(duì)列的HTML模版,可以使用以下標(biāo)簽:instanceID – Uploadify實(shí)例的ID fileID – 列隊(duì)中此文件的ID,或者理解為此任務(wù)的ID fileName – 文件的名稱 fileSize – 當(dāng)前上傳文件的大小 插入模版標(biāo)簽時(shí)使用格式如:${fileName} method: 'post', // 提交方式Post或Get multi: true, // 設(shè)置為true時(shí)可以上傳多個(gè)文件 formData: { 'action': 'upload' }, // AnJSON格式上傳每個(gè)文件的同時(shí)提交到服務(wù)器的額外數(shù)據(jù),可在'onUploadStart'事件中使用'settings'方法動(dòng)態(tài)設(shè)置 preventCaching: true, // 如果為true,則每次上傳文件時(shí)自動(dòng)加上一串隨機(jī)字符串參數(shù),防止URL緩存影響上傳結(jié)果 progressData: 'percentage', // 設(shè)置上傳進(jìn)度顯示方式,percentage顯示上傳百分比,speed顯示上傳速度 listID: false, // 設(shè)置附件列表容器DOM元素的ID queueID: false, // 設(shè)置上傳隊(duì)列容器DOM元素的ID,如果為false則自動(dòng)生成一個(gè)隊(duì)列容器 queueSizeLimit: 999, // 隊(duì)列最多顯示的任務(wù)數(shù)量,如果選擇的文件數(shù)量超出此限制,將會(huì)出發(fā)onSelectError事件。注意此項(xiàng)并非最大文件上傳數(shù)量,如果要限制最大上傳文件數(shù)量,應(yīng)設(shè)置uploadLimit removeCompleted: false, // 是否自動(dòng)將已完成任務(wù)從隊(duì)列中刪除,如果設(shè)置為ture則會(huì)從隊(duì)列中移除 removeTimeout: 3, // 如果設(shè)置了任務(wù)完成后自動(dòng)從隊(duì)列中移除,則可以規(guī)定從完成到被移除的時(shí)間間隔 requeueErrors: false, // 如果設(shè)置為true,則單個(gè)任務(wù)上傳失敗后將返回錯(cuò)誤,并重新加入任務(wù)隊(duì)列上傳 successTimeout: 30, // 文件上傳成功后服務(wù)端應(yīng)返回成功標(biāo)志,此項(xiàng)設(shè)置返回結(jié)果的超時(shí)時(shí)間 uploadLimit: 0, // 最大上傳文件數(shù)量,如果達(dá)到或超出此限制將會(huì)觸發(fā)onUploadError事件 width: 75, // 設(shè)置文件瀏覽按鈕的寬度
設(shè)置的事件:
onDialogClose : function(swfuploadifyQueue) {//當(dāng)文件選擇對話框關(guān)閉時(shí)觸發(fā) if( swfuploadifyQueue.filesErrored > 0 ){ alert( '添加至隊(duì)列時(shí)有' +swfuploadifyQueue.filesErrored +'個(gè)文件發(fā)生錯(cuò)誤n' +'錯(cuò)誤信息:' +swfuploadifyQueue.errorMsg +'n選定的文件數(shù):' +swfuploadifyQueue.filesSelected +'n成功添加至隊(duì)列的文件數(shù):' +swfuploadifyQueue.filesQueued +'n隊(duì)列中的總文件數(shù)量:' +swfuploadifyQueue.queueLength); } } onDialogOpen : function() {//當(dāng)選擇文件對話框打開時(shí)觸發(fā) alert( 'Open!'); } onSelect : function(file) {//當(dāng)每個(gè)文件添加至隊(duì)列后觸發(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ā)生錯(cuò)誤時(shí)觸發(fā) alert( 'id: ' + file.id + ' - 索引: ' + file.index + ' - 文件名: ' + file.name + ' - 文件大小: ' + file.size + ' - 類型: ' + file.type + ' - 創(chuàng)建日期: ' + file.creationdate + ' - 修改日期: ' + file.modificationdate + ' - 文件狀態(tài): ' + file.filestatus + ' - 錯(cuò)誤代碼: ' + errorCode + ' - 錯(cuò)誤信息: ' + errorMsg); } onQueueComplete : function(stats) {//當(dāng)隊(duì)列中的所有文件全部完成上傳時(shí)觸發(fā) alert( '成功上傳的文件數(shù): ' + stats.successful_uploads + ' - 上傳出錯(cuò)的文件數(shù): ' + stats.upload_errors + ' - 取消上傳的文件數(shù): ' + stats.upload_cancelled + ' - 出錯(cuò)的文件數(shù)' + stats.queue_errors); } onUploadComplete : function(file,swfuploadifyQueue) {//隊(duì)列中的每個(gè)文件上傳完成時(shí)觸發(fā)一次 alert( 'id: ' + file.id + ' - 索引: ' + file.index + ' - 文件名: ' + file.name + ' - 文件大小: ' + file.size + ' - 類型: ' + file.type + ' - 創(chuàng)建日期: ' + file.creationdate + ' - 修改日期: ' + file.modificationdate + ' - 文件狀態(tài): ' + file.filestatus + ' - 出錯(cuò)的文件數(shù): ' + swfuploadifyQueue.filesErrored + ' - 錯(cuò)誤信息: ' + swfuploadifyQueue.errorMsg + ' - 要添加至隊(duì)列的數(shù)量: ' + swfuploadifyQueue.filesSelected + ' - 添加至對立的數(shù)量: ' + swfuploadifyQueue.filesQueued + ' - 隊(duì)列長度: ' + swfuploadifyQueue.queueLength); } onUploadError : function(file,errorCode,errorMsg,errorString,swfuploadifyQueue) {//上傳文件出錯(cuò)是觸發(fā)(每個(gè)出錯(cuò)文件觸發(fā)一次) alert( 'id: ' + file.id + ' - 索引: ' + file.index + ' - 文件名: ' + file.name + ' - 文件大小: ' + file.size + ' - 類型: ' + file.type + ' - 創(chuàng)建日期: ' + file.creationdate + ' - 修改日期: ' + file.modificationdate + ' - 文件狀態(tài): ' + file.filestatus + ' - 錯(cuò)誤代碼: ' + errorCode + ' - 錯(cuò)誤描述: ' + errorMsg + ' - 簡要錯(cuò)誤描述: ' + errorString + ' - 出錯(cuò)的文件數(shù): ' + swfuploadifyQueue.filesErrored + ' - 錯(cuò)誤信息: ' + swfuploadifyQueue.errorMsg + ' - 要添加至隊(duì)列的數(shù)量: ' + swfuploadifyQueue.filesSelected + ' - 添加至對立的數(shù)量: ' + swfuploadifyQueue.filesQueued + ' - 隊(duì)列長度: ' + swfuploadifyQueue.queueLength); } onUploadProgress : function(file,fileBytesLoaded,fileTotalBytes, queueBytesLoaded,swfuploadifyQueueUploadSize) {//上傳進(jìn)度發(fā)生變更時(shí)觸發(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 + ' - 隊(duì)列已上傳: ' + queueBytesLoaded + ' - 隊(duì)列大小: ' + swfuploadifyQueueUploadSize); } onUploadStart: function(file) {//上傳開始時(shí)觸發(fā)(每個(gè)文件觸發(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) {//上傳完成時(shí)觸發(fā)(每個(gè)文件觸發(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í)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07ASP.NET Core自動(dòng)生成小寫破折號路由的實(shí)現(xiàn)方法
這篇文章主要介紹了ASP.NET Core自動(dòng)生成小寫破折號路由的實(shí)現(xiàn)方法,幫助大家更好的理解和學(xué)習(xí)使用ASP.NET Core,感興趣的朋友可以了解下2021-04-04ASP.NET State service狀態(tài)服務(wù)的問題解決方法
每次重啟機(jī)器以后,在.NET2005上跑Web程序老是遇到這樣的問題2008-11-11asp.net后臺如何輸出js腳本使用什么方法可以實(shí)現(xiàn)
asp.net后臺如何輸出js腳本,用page.ClientScript.RegisterStartupScript方式實(shí)現(xiàn),實(shí)現(xiàn)示例如下,感興趣的朋友不要錯(cuò)過2014-01-01uniapp+.net?core實(shí)現(xiàn)微信小程序獲取手機(jī)號功能
這篇文章主要介紹了uniapp+.net?core實(shí)現(xiàn)微信小程序獲取手機(jī)號功能,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08.Net core下直接執(zhí)行SQL語句并生成DataTable的實(shí)現(xiàn)方法
.net core可以執(zhí)行SQL語句,但是只能生成強(qiáng)類型的返回結(jié)果。這篇文章主要介紹了.Net core下直接執(zhí)行SQL語句并生成DataTable的相關(guān)資料,需要的朋友可以參考下2016-11-11