flash 多个文件上传
引用:http://bbs.51aspx.com/showtopic-44723.html
像flickr一樣多選圖片一次上傳
做上傳圖片功能的時候，經常會遇到這樣一個問題，有時候可能需要一次上傳多張圖片，而用html中默認的上控件，卻只能選定一個文件，且不能對文件的后綴進行篩選。需要一次上傳多個文件的需求，往往可以通過添加多個上傳控件來予以滿足，比如百度空間的相冊上傳功能就是這樣來實現的。不過，要實現對上傳文件后綴的過濾，卻始終無法通過常規的方法予以實現。
這兩個功能真的這么難以實現嗎？非也，看看flickr的上傳功能即可獲得明確的答復。
為什么能實現這樣的功能呢？google了一下，謎底就揭曉了。原來，這是利用了flash的若干功能，通過javascript和actionscript的交互得以實現的。js和as的通訊以前有研究過，所以要實現起來非常簡單。再到flash里邊f1一下，關于上傳方面的相關只是也差不多了解了，因此，接下來的事情的就只是順水推舟的事情了。
最重要的還是flash代碼的完善，最后的成果如下：
// MultiUploader.fla
import flash.net.FileReferenceList;
import flash.net.FileReference;
import flash.external.ExternalInterface;
// 設置as中函數和js調用時的映射關系
ExternalInterface.addCallback("fu_open_dialog", null, openDialog);
ExternalInterface.addCallback("fu_begin_upload", null, beginUpload);
// 可以通過html頁面里邊設置FlashVars里邊的upload_url來更改上傳文件的路徑
var uploadUrl:String = typeof(_root.upload_url) == "undefined" ? "FlashUpload.ashx" : _root.upload_url;
var listener:Object = new Object();
// 選擇文件后，會視圖調用js函數onUploaderSelect，并將文件列表傳入進去，便于js進一步做一些邏輯控制
listener.onSelect = function(fileRefList:FileReferenceList) {
??ExternalInterface.call("onUploaderSelect", fileRefList.fileList);??
};
var fileRefList:FileReferenceList = null;
var imageTypes:Object = new Object();
imageTypes.description = "Images (*.jpg, *.jpeg, *.gif, *.png)"; // 上傳文件類型說明
imageTypes.extension = "*.jpg; *.jpeg; *.gif; *.png"; // 控制上傳文件類型
// 顯示文件打開窗口
function openDialog():Void {
??if (fileRefList == null) {
??fileRefList = new FileReferenceList();
??fileRefList.addListener(listener);
??}
??fileRefList.browse([imageTypes]);
}
// 開始上傳
function beginUpload():Void {
??var lis = new Object();
??// 每上傳完一個文件后調用js函數onUploaderComplete
??lis.onComplete = function(file:FileReference):Void {
??ExternalInterface.call("onUploaderComplete", file.name);??
??};
??// 處理上傳地址的http狀態錯誤。比如404等。
??lis.onHTTPError = function(file:FileReference, httpError: Number):Void {
??ExternalInterface.call("onUploaderHTTPError", httpError, file.name);
??}
????
??var list:Array = fileRefList.fileList;
??var item:FileReference;
??// 最終還是將文件分單次傳到指定上傳頁面進行處理
??for(var i:Number = 0; i < list.length; i++) {
??item = list;
??item.addListener(lis);
??item.upload(uploadUrl);
??}
}
至于客戶端的處理，只需要將as中自動調用的幾個js函數實現即可。最后的頁面代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" value="open" οnclick="openUploadDialog();"/>
<input type="button" value="upload" οnclick="uploadFiles();"/>
<div id="flashPanel"></div>
</body>
<script type="text/javascript">
var flash = createUploadFlash(document.getElementById('flashPanel'), 'upload.swf', 'FlashUpload.ashx')
// 打開文件對話框
function openUploadDialog() {
??flash.fu_open_dialog();
}
// 上傳文件
function uploadFiles() {
??flash.fu_begin_upload();
}
// 選擇文件以后
function onUploaderSelect(list) {
??alert(list);
}
// 上傳完一個文件以后
function onUploaderComplete(name) {
??alert(name);???
}
// 上傳文件出錯時
function onUploaderHTTPError(number, name) {
??switch (number) {
??case 413:
??alert("文件" + name + "大于10K，不能上傳");
??break;???
??}
}
/**
* 創建一個flash。主要是在ie7里邊需要用鼠標點擊才能激活flash，通過動態生成flash的方式可以繞過這一點。
* @param panel 用來放置flash的div
* @param flashUrl flash的地址
* @param uploadUrl 用來出來上傳文件的地址
*/
function createUploadFlash(panel, flashUrl, uploadUrl){
??var code = '<object classid="clsid27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="0" height="0" id="flashObject" align="middle">\
??<param name="allowScriptAccess" value="sameDomain" />\
??<param name="movie" value="' + flashUrl + '" />\
??<param name="quality" value="high" />\
??<param name="bgcolor" value="#ffffff" />\
??<param name="FlashVars" value="upload_url=' + uploadUrl + '" />\
??<embed src="' + flashUrl + '" quality="high" bgcolor="#ffffff" width="0" height="0" name="flashObject" FlashVars="upload_url=' + uploadUrl + '" align="middle" allowScriptAccess="sameDomain" id="flashObject" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />\
??</object>';
??panel.innerHTML = code;
??return window.document.flashObject;
}
</script>
</html>
這次功能的實現上，在其他方面都還很順利得以實現，反而是在createUploadFlash這個函數的實現上遇到了一些麻煩。因為最后返回flash對象的時候經常不被正常地識別。如果這段代碼不用js生成，那么用document.flashObject和dobument.getElementById('flashObject')都可以正常識別flashObject，但動態生成以后，用后者就不能正常被訪問到了，可能的原因是加載需要一定的延時，有待研究。
轉載于:https://www.cnblogs.com/sode/archive/2012/12/26/2834165.html
總結
以上是生活随笔為你收集整理的flash 多个文件上传的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 票贷和税贷有什么区别
- 下一篇： CBitMap的用法 from http