今天研究解决了使用swfupload实现图片批量上传的功能~~
不废话，自然是有一个上传页(default.aspx)，一个处理页(upload.aspx)，页面
Default.aspx
- <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddPhotos.aspx.cs" Inherits="SPACE_AddPhotos" %>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>批量相片上传</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <link href="../Control/SwfUpload/default.css" mce_href="Control/SwfUpload/default.css" rel="stylesheet" type="text/css" />
- <mce:script language="javascript"><!--
- var swfobject=function(){var X="undefined",P="object",a="visibility:visible",e="visibility:hidden",B="Shockwave Flash",h="ShockwaveFlash.ShockwaveFlash",V="application/x-shockwave-flash",K="SWFObjectExprInst",G=window,g=document,N=navigator,f=[],H=[],Q=null,L=null,S=false,C=false;var Y=function(){var l=typeof g.getElementById!=X&&typeof g.getElementsByTagName!=X&&typeof g.createElement!=X&&typeof g.appendChild!=X&&typeof g.replaceChild!=X&&typeof g.removeChild!=X&&typeof g.cloneNode!=X,t=[0,0,0],n=null;if(typeof N.plugins!=X&&typeof N.plugins[B]==P){n=N.plugins[B].description;if(n){n=n.replace(/^.*/s+(/S+/s+/S+$)/,"$1");t[0]=parseInt(n.replace(/^(.*)/..*$/,"$1"),10);t[1]=parseInt(n.replace(/^.*/.(.*)/s.*$/,"$1"),10);t[2]=/r/.test(n)?parseInt(n.replace(/^.*r(.*)$/,"$1"),10):0}}else{if(typeof G.ActiveXObject!=X){var o=null,s=false;try{o=new ActiveXObject(h+".7")}catch(k){try{o=new ActiveXObject(h+".6");t=[6,0,21];o.AllowScriptAccess="always"}catch(k){if(t[0]==6){s=true}}if(!s){try{o=new ActiveXObject(h)}catch(k){}}}if(!s&&o){try{n=o.GetVariable("$version");if(n){n=n.split(" ")[1].split(",");t=[parseInt(n[0],10),parseInt(n[1],10),parseInt(n[2],10)]}}catch(k){}}}}var v=N.userAgent.toLowerCase(),j=N.platform.toLowerCase(),r=/webkit/.test(v)?parseFloat(v.replace(/^.*webkit//(/d+(/./d+)?).*$/,"$1")):false,i=false,q=j?/win/.test(j):/win/.test(v),m=j?/mac/.test(j):/mac/.test(v);/*@cc_on i=true;@if(@_win32)q=true;@elif(@_mac)m=true;@end@*/return{w3cdom:l,pv:t,webkit:r,ie:i,win:q,mac:m}}();var d=function(){if(!Y.w3cdom){return }J(I);if(Y.ie&&Y.win){try{g.write("<script id=__ie_ondomload defer=true src="//:" mce_src="../../undefined/"><//script>");var i=b("__ie_ondomload");if(i){i.onreadystatechange=function(){if(this.readyState=="complete"){this.parentNode.removeChild(this);U()}}}}catch(j){}}if(Y.webkit&&typeof g.readyState!=X){Q=setInterval(function(){if(/loaded|complete/.test(g.readyState)){U()}},10)}if(typeof g.addEventListener!=X){g.addEventListener("DOMContentLoaded",U,null)}M(U)}();function U(){if(S){return }if(Y.ie&&Y.win){var m=W("span");try{var l=g.getElementsByTagName("body")[0].appendChild(m);l.parentNode.removeChild(l)}catch(n){return }}S=true;if(Q){clearInterval(Q);Q=null}var j=f.length;for(var k=0;k<j;k++){f[k]()}}function J(i){if(S){i()}else{f[f.length]=i}}function M(j){if(typeof G.addEventListener!=X){G.addEventListener("load",j,false)}else{if(typeof g.addEventListener!=X){g.addEventListener("load",j,false)}else{if(typeof G.attachEvent!=X){G.attachEvent("onload",j)}else{if(typeof G.οnlοad=="function"){var i=G.onload;G.οnlοad=function(){i();j()}}else{G.οnlοad=j}}}}}function I(){var l=H.length;for(var j=0;j<l;j++){var m=H[j].id;if(Y.pv[0]>0){var k=b(m);if(k){H[j].width=k.getAttribute("width")?k.getAttribute("width"):"0";H[j].height=k.getAttribute("height")?k.getAttribute("height"):"0";if(O(H[j].swfVersion)){if(Y.webkit&&Y.webkit<312){T(k)}}else{if(H[j].expressInstall&&!C&&O("6.0.65")&&(Y.win||Y.mac)){D(H[j])}else{c(k)}}}}A("#"+m,a)}}function T(m){var k=m.getElementsByTagName(P)[0];if(k){var p=W("embed"),r=k.attributes;if(r){var o=r.length;for(var n=0;n<o;n++){if(r[n].nodeName.toLowerCase()=="data"){p.setAttribute("src",r[n].nodeValue)}else{p.setAttribute(r[n].nodeName,r[n].nodeValue)}}}var q=k.childNodes;if(q){var s=q.length;for(var l=0;l<s;l++){if(q[l].nodeType==1&&q[l].nodeName.toLowerCase()=="param"){p.setAttribute(q[l].getAttribute("name"),q[l].getAttribute("value"))}}}m.parentNode.replaceChild(p,m)}}function F(i){if(Y.ie&&Y.win&&O("8.0.0")){G.attachEvent("onunload",function(){var k=b(i);for(var j in k){if(typeof k[j]=="function"){k[j]=function(){}}}k.parentNode.removeChild(k)})}}function D(j){C=true;var o=b(j.id);if(o){if(j.altContentId){var l=b(j.altContentId);if(l){L=l}}else{L=Z(o)}if(!(/%$/.test(j.width))&&parseInt(j.width,10)<310){j.width="310"}if(!(/%$/.test(j.height))&&parseInt(j.height,10)<137){j.height="137"}g.title=g.title.slice(0,47)+" - Flash Player Installation";var n=Y.ie&&Y.win?"ActiveX":"PlugIn",k=g.title,m="MMredirectURL="+G.location+"&MMplayerType="+n+"&MMdoctitle="+k,p=j.id;if(Y.ie&&Y.win&&o.readyState!=4){var i=W("div");p+="SWFObjectNew";i.setAttribute("id",p);o.parentNode.insertBefore(i,o);o.style.display="none";G.attachEvent("onload",function(){o.parentNode.removeChild(o)})}R({data:j.expressInstall,id:K,width:j.width,height:j.height},{flashvars:m},p)}}function c(j){if(Y.ie&&Y.win&&j.readyState!=4){var i=W("div");j.parentNode.insertBefore(i,j);i.parentNode.replaceChild(Z(j),i);j.style.display="none";G.attachEvent("onload",function(){j.parentNode.removeChild(j)})}else{j.parentNode.replaceChild(Z(j),j)}}function Z(n){var m=W("div");if(Y.win&&Y.ie){m.innerHTML=n.innerHTML}else{var k=n.getElementsByTagName(P)[0];if(k){var o=k.childNodes;if(o){var j=o.length;for(var l=0;l<j;l++){if(!(o[l].nodeType==1&&o[l].nodeName.toLowerCase()=="param")&&!(o[l].nodeType==8)){m.appendChild(o[l].cloneNode(true))}}}}}return m}function R(AE,AC,q){var p,t=b(q);if(typeof AE.id==X){AE.id=q}if(Y.ie&&Y.win){var AD="";for(var z in AE){if(AE[z]!=Object.prototype[z]){if(z=="data"){AC.movie=AE[z]}else{if(z.toLowerCase()=="styleclass"){AD+=' class="'+AE[z]+'"'}else{if(z!="classid"){AD+=" "+z+'="'+AE[z]+'"'}}}}}var AB="";for(var y in AC){if(AC[y]!=Object.prototype[y]){AB+='<param name="'+y+'" value="'+AC[y]+'" />'}}t.outerHTML='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"'+AD+">"+AB+"</object>";F(AE.id);p=b(AE.id)}else{if(Y.webkit&&Y.webkit<312){var AA=W("embed");AA.setAttribute("type",V);for(var x in AE){if(AE[x]!=Object.prototype[x]){if(x=="data"){AA.setAttribute("src",AE[x])}else{if(x.toLowerCase()=="styleclass"){AA.setAttribute("class",AE[x])}else{if(x!="classid"){AA.setAttribute(x,AE[x])}}}}}for(var w in AC){if(AC[w]!=Object.prototype[w]){if(w!="movie"){AA.setAttribute(w,AC[w])}}}t.parentNode.replaceChild(AA,t);p=AA}else{var s=W(P);s.setAttribute("type",V);for(var v in AE){if(AE[v]!=Object.prototype[v]){if(v.toLowerCase()=="styleclass"){s.setAttribute("class",AE[v])}else{if(v!="classid"){s.setAttribute(v,AE[v])}}}}for(var u in AC){if(AC[u]!=Object.prototype[u]&&u!="movie"){E(s,u,AC[u])}}t.parentNode.replaceChild(s,t);p=s}}return p}function E(k,i,j){var l=W("param");l.setAttribute("name",i);l.setAttribute("value",j);k.appendChild(l)}function b(i){return g.getElementById(i)}function W(i){return g.createElement(i)}function O(k){var j=Y.pv,i=k.split(".");i[0]=parseInt(i[0],10);i[1]=parseInt(i[1],10);i[2]=parseInt(i[2],10);return(j[0]>i[0]||(j[0]==i[0]&&j[1]>i[1])||(j[0]==i[0]&&j[1]==i[1]&&j[2]>=i[2]))?true:false}function A(m,j){if(Y.ie&&Y.mac){return }var l=g.getElementsByTagName("head")[0],k=W("style");k.setAttribute("type","text/css");k.setAttribute("media","screen");if(!(Y.ie&&Y.win)&&typeof g.createTextNode!=X){k.appendChild(g.createTextNode(m+" {"+j+"}"))}l.appendChild(k);if(Y.ie&&Y.win&&typeof g.styleSheets!=X&&g.styleSheets.length>0){var i=g.styleSheets[g.styleSheets.length-1];if(typeof i.addRule==P){i.addRule(m,j)}}}return{registerObject:function(l,i,k){if(!Y.w3cdom||!l||!i){return }var j={};j.id=l;j.swfVersion=i;j.expressInstall=k?k:false;H[H.length]=j;A("#"+l,e)},getObjectById:function(l){var i=null;if(Y.w3cdom&&S){var j=b(l);if(j){var k=j.getElementsByTagName(P)[0];if(!k||(k&&typeof j.SetVariable!=X)){i=j}else{if(typeof k.SetVariable!=X){i=k}}}}return i},embedSWF:function(n,u,r,t,j,m,k,p,s){if(!Y.w3cdom||!n||!u||!r||!t||!j){return }r+="";t+="";if(O(j)){A("#"+u,e);var q=(typeof s==P)?s:{};q.data=n;q.width=r;q.height=t;var o=(typeof p==P)?p:{};if(typeof k==P){for(var l in k){if(k[l]!=Object.prototype[l]){if(typeof o.flashvars!=X){o.flashvars+="&"+l+"="+k[l]}else{o.flashvars=l+"="+k[l]}}}}J(function(){R(q,o,u);A("#"+u,a)})}else{if(m&&!C&&O("6.0.65")&&(Y.win||Y.mac)){A("#"+u,e);J(function(){var i={};i.id=i.altContentId=u;i.width=r;i.height=t;i.expressInstall=m;D(i);A("#"+u,a)})}}},getFlashPlayerVersion:function(){return{major:Y.pv[0],minor:Y.pv[1],release:Y.pv[2]}},hasFlashPlayerVersion:O,createSWF:function(k,j,i){if(Y.w3cdom&&S){return R(k,j,i)}else{return undefined}},createCSS:function(j,i){if(Y.w3cdom){A(j,i)}},addDomLoadEvent:J,addLoadEvent:M,getQueryParamValue:function(m){var l=g.location.search||g.location.hash;if(m==null){return l}if(l){var k=l.substring(1).split("&");for(var j=0;j<k.length;j++){if(k[j].substring(0,k[j].indexOf("="))==m){return k[j].substring((k[j].indexOf("=")+1))}}}return""},expressInstallCallback:function(){if(C&&L){var i=b(K);if(i){i.parentNode.replaceChild(L,i);L=null;C=false}}}}}();
- var SWFUpload;
- if (typeof(SWFUpload) === "function") {
- SWFUpload.onload = function () {};
- swfobject.addDomLoadEvent(function () {
- if (typeof(SWFUpload.onload) === "function") {
- SWFUpload.onload.call(window);
- }
- });
- SWFUpload.prototype.initSettings = (function (oldInitSettings) {
- return function () {
- if (typeof(oldInitSettings) === "function") {
- oldInitSettings.call(this);
- }
- this.ensureDefault = function (settingName, defaultValue) {
- this.settings[settingName] = (this.settings[settingName] == undefined) ? defaultValue : this.settings[settingName];
- };
- this.ensureDefault("minimum_flash_version", "9.0.28");
- this.ensureDefault("swfupload_load_failed_handler", null);
- delete this.ensureDefault;
- };
- })(SWFUpload.prototype.initSettings);
- SWFUpload.prototype.loadFlash = function (oldLoadFlash) {
- return function () {
- var hasFlash = swfobject.hasFlashPlayerVersion(this.settings.minimum_flash_version);
- if (hasFlash) {
- this.queueEvent("swfupload_pre_load_handler");
- if (typeof(oldLoadFlash) === "function") {
- oldLoadFlash.call(this);
- }
- } else {
- this.queueEvent("swfupload_load_failed_handler");
- }
- };
- }(SWFUpload.prototype.loadFlash);
- SWFUpload.prototype.displayDebugInfo = function (oldDisplayDebugInfo) {
- return function () {
- if (typeof(oldDisplayDebugInfo) === "function") {
- oldDisplayDebugInfo.call(this);
- }
- this.debug(
- [
- "SWFUpload.SWFObject Plugin settings:", "/n",
- "/t", "minimum_flash_version: ", this.settings.minimum_flash_version, "/n",
- "/t", "swfupload_load_failed_handler assigned: ", (typeof(this.settings.swfupload_load_failed_handler) === "function").toString(), "/n",
- ].join("")
- );
- };
- }(SWFUpload.prototype.displayDebugInfo);
- }
- function SubmitCheck()
- {
- var albumID = "<%=this.dllAlbumType.SelectedValue%>";
- if( albumID == "0" )
- {
- alert("请选择一个相册");
- return false;
- }
- return true;
- }
- // --></mce:script>
- <mce:script type="text/javascript" src="../Control/SwfUpload/swfupload.js" mce_src="Control/SwfUpload/swfupload.js"></mce:script>
- <mce:script type="text/javascript" src="../Control/SwfUpload/handlers.js" mce_src="Control/SwfUpload/handlers.js"></mce:script>
- <mce:script type="text/javascript" src="../Control/SwfUpload/swfupload.swfobject.js" mce_src="Control/SwfUpload/swfupload.swfobject.js"></mce:script>
- <mce:script type="text/javascript" src="../Control/SwfUpload/swfupload.queue.js" mce_src="Control/SwfUpload/swfupload.queue.js"></mce:script>
- <mce:script type="text/javascript" src="../Control/SwfUpload/fileprogress.js" mce_src="Control/SwfUpload/fileprogress.js"></mce:script>
- <mce:script type="text/javascript"><!--
- var swfu;
- SWFUpload.onload = function () {
- var settings = {
- flash_url : "../Control/SwfUpload/swfupload.swf",
- upload_url: "./upload.aspx",
- post_params: {
- "albumID" : "<%=this.dllAlbumType.SelectedValue%>"
- },
- file_size_limit : "<%=maxSize %>",
- file_types : "<%=allowFileType %>",
- file_types_description : "<%=allowFileType %>",
- file_upload_limit : 100,
- file_queue_limit : 0,
- custom_settings : {
- progressTarget : "fsUploadProgress",
- cancelButtonId : "btnCancel",
- uploadButtonId : "btnUpload",
- myFileListTarget : "idFileList"
- },
- debug: false,
- auto_upload:false,
- // Button Settings
- button_image_url : "../Control/SwfUpload/images/XPButtonUploadText_61x22.png", // Relative to the SWF file
- button_placeholder_id : "spanButtonPlaceholder",
- button_width: 61,
- button_height: 22,
- // The event handler functions are defined in handlers.js
- swfupload_loaded_handler : swfUploadLoaded,
- file_queued_handler : fileQueued,
- file_queue_error_handler : fileQueueError,
- file_dialog_complete_handler : fileDialogComplete,
- upload_start_handler : uploadStart,
- upload_progress_handler : uploadProgress,
- upload_error_handler : uploadError,
- upload_success_handler : uploadSuccess,
- upload_complete_handler : uploadComplete,
- queue_complete_handler : queueComplete, // Queue plugin event
- // SWFObject settings
- minimum_flash_version : "9.0.28",
- swfupload_pre_load_handler : swfUploadPreLoad,
- swfupload_load_failed_handler : swfUploadLoadFailed
- }
- swfu = new SWFUpload(settings);
- }
- // --></mce:script>
- </head>
- <body bgcolor="#FCFCFC" topmargin="0px" leftmargin="10px" rightmargin="10px" scroll="yes">
- <form id="form1" action="default.aspx" method="post" enctype="multipart/form-data" runat="server">
- <table width="100%" cellspacing="4" cellpadding="4" border="0" bgcolor="#FCFCFC">
- <tr>
- <td class="DH1">
- <table width="100%" cellspacing="4" cellpadding="4" border="0" bgcolor="#FCFCFC">
- <tr>
- <td class="DH2">
- <STRONG>批量上传相片 （支持的相片类型：<%=allowFileType %>；单个相片最大不能超过：<%=maxSize %>）</STRONG>
- </td><td class="DH2" align="right"></td>
- </tr>
- </table>
- <div id="content">
- <table width="90%" cellspacing="0" cellpadding="0" border="0"><tr><td>
- <asp:DropDownList ID="dllAlbumType" runat="server" AutoPostBack="true">
- </asp:DropDownList>
- <span id="spanButtonPlaceholder"></span>
- <input id="btnUpload" type="button" value="上传相片" class="btn" />
- <input id="btnCancel" type="button" value="取消全部上传" disabled="disabled" class="btn" />
- 等待上传 <span id="idFileListCount">0</span> 个 ，成功上传 <span id="idFileListSuccessUploadCount">0</span> 个
- </td>
- </tr></table>
- <table id="idFileList" class="uploadFileList"><tr class="uploadTitle"><td><B>文件名</B></td><td><B>文件大小</B></td><td width=100px><B>状态</B></td><td width=35px> </td></tr></table>
- <div id="divSWFUploadUI" style="visibility: hidden;" mce_style="visibility: hidden;"></div>
- <noscript style="display: block; margin: 10px 25px; padding: 10px 15px;" mce_style="display: block; margin: 10px 25px; padding: 10px 15px;">
- 很抱歉，相片上传界面无法载入，请将浏览器设置成支持JavaScript。
- </noscript>
- <div id="divLoadingContent" class="content" style="background-color: #FFFF66; border-top: solid 4px #FF9966; border-bottom: solid 4px #FF9966; margin: 10px 25px; padding: 10px 15px; display: none;" mce_style="background-color: #FFFF66; border-top: solid 4px #FF9966; border-bottom: solid 4px #FF9966; margin: 10px 25px; padding: 10px 15px; display: none;">
- 相片上传界面正在载入，请稍后...
- </div>
- <div id="divLongLoading" class="content" style="background-color: #FFFF66; border-top: solid 4px #FF9966; border-bottom: solid 4px #FF9966; margin: 10px 25px; padding: 10px 15px; display: none;" mce_style="background-color: #FFFF66; border-top: solid 4px #FF9966; border-bottom: solid 4px #FF9966; margin: 10px 25px; padding: 10px 15px; display: none;">
- 相片上传界面载入失败，请确保浏览器已经开启对JavaScript的支持，并且已经安装可以工作的Flash插件版本。 <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" mce_href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" target="_blank"><font color='red'>安装flash更新</font></a>
- </div>
- <div id="divAlternateContent" class="content" style="background-color: #FFFF66; border-top: solid 4px #FF9966; border-bottom: solid 4px #FF9966; margin: 10px 25px; padding: 10px 15px; display: none;" mce_style="background-color: #FFFF66; border-top: solid 4px #FF9966; border-bottom: solid 4px #FF9966; margin: 10px 25px; padding: 10px 15px; display: none;">
- 很抱歉，相片上传界面无法载入，请安装或者升级您的Flash插件。
- 请访问： <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" mce_href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" target="_blank"><font color='red'>安装flash更新</font></a> 。
- </div>
- </div>
- </td></tr></table>
- </form>
- </body>
- </html>
其中，关键要设置的地方，就是下面这块
SWFUpload.onload = function () {
var settings = {
flash_url : "../Control/SwfUpload/swfupload.swf", //要调用的flash地址
upload_url: "./upload.aspx", //处理程序的地址
post_params: {
"albumID" : "<%=this.dllAlbumType.SelectedValue%>" //要同步传送给upload.aspx的参数，这里我传了一个相册ID
},
file_size_limit : "2MB", //单个文件的最大限制
file_types : "*.jpg;*.jpeg;*.gif", //允许上传的文件类型
file_types_description : "*.jpg;*.jpeg;*.gif", //允许上传的文件类型描述，用于default.aspx页面展示用
file_upload_limit : 100, //每次最多可以上传的文件个数
file_queue_limit : 0,
custom_settings : {
progressTarget : "fsUploadProgress",
cancelButtonId : "btnCancel",
uploadButtonId : "btnUpload",
myFileListTarget : "idFileList"
},
debug: false,
auto_upload:false,
upload.aspx
1、使用 Request["albumID"] 来获取上面设置的相册ID
2、HttpPostedFile photo = Request.Files["Filedata"]; 使用这句就可以获取到传过来的图片对象
代码就不多写了，跟用input上传一样处理，只是其中有一点，需要注意，使用swfupload是无法通过 photo.ContentType.ToString().ToLower(); 这样来获取到文件类型的，这里我使用 photo.FileName.Substring(photo.FileName.LastIndexOf(".")).ToLower(); 来获取
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
