多选图片一次上传(as+js) ,仿QQ相册

news/2025/2/21 17:40:02/

做上传图片功能的时候，经常会遇到这样一个问题，有时候可能需要一次上传多张图片，而用html中默认的上控件，却只能选定一个文件，且不能对文件的后缀进行筛选。需要一次上传多个文件的需求，往往可以通过添加多个上传控件来予以满足，比如百度空间的相册上传功能就是这样来实现的。不过，要实现对上传文件后缀的过滤，却始终无法通过常规的方法予以实现。
这两个功能真的这么难以实现吗？非也，看看flickr的上传功能即可获得明确的答复。
为什么能实现这样的功能呢？google了一下，谜底就揭晓了。原来，这是利用了flash的若干功能，通过javascript和 actionscript的交互得以实现的。js和as的通讯以前有研究过，所以要实现起来非常简单。再到flash里边f1一下，关于上传方面的相关只是也差不多了解了，因此，接下来的事情的就只是顺水推舟的事情了。
最重要的还是flash代码的完善，最后的成果如下：

Java代码
  1. // MultiUploader.fla   
  2. import flash.net.FileReferenceList;   
  3. import flash.net.FileReference;   
  4. import flash.external.ExternalInterface;   
  5.   
  6. // 设置as中函数和js调用时的映射关系   
  7. ExternalInterface.addCallback("fu_open_dialog", null, openDialog);   
  8. ExternalInterface.addCallback("fu_begin_upload", null, beginUpload);   
  9.   
  10. // 可以通过html页面里边设置FlashVars里边的upload_url来更改上传文件的路径   
  11. var uploadUrl:String = typeof(_root.upload_url) == "undefined" ? "FlashUpload.ashx" : _root.upload_url;   
  12. var listener:Object = new Object();   
  13. // 选择文件后，会视图调用js函数onUploaderSelect，并将文件列表传入进去，便于js进一步做一些逻辑控制   
  14. listener.onSelect = function(fileRefList:FileReferenceList) {   
  15.     ExternalInterface.call("onUploaderSelect", fileRefList.fileList);    
  16. };   
  17.   
  18. var fileRefList:FileReferenceList = null;   
  19. var imageTypes:Object = new Object();   
  20. imageTypes.description = "Images (*.jpg, *.jpeg, *.gif, *.png)"; // 上传文件类型说明   
  21. imageTypes.extension = "*.jpg; *.jpeg; *.gif; *.png"; // 控制上传文件类型   
  22.   
  23. // 显示文件打开窗口   
  24. function openDialog():Void {   
  25.     if (fileRefList == null) {   
  26.         fileRefList = new FileReferenceList();   
  27.         fileRefList.addListener(listener);   
  28.     }   
  29.     fileRefList.browse([imageTypes]);   
  30. }   
  31. // 开始上传   
  32. function beginUpload():Void {   
  33.     var lis = new Object();   
  34.     // 每上传完一个文件后调用js函数onUploaderComplete   
  35.     lis.onComplete = function(file:FileReference):Void {   
  36.         ExternalInterface.call("onUploaderComplete", file.name);    
  37.     };   
  38.     // 处理上传地址的http状态错误。比如404等。   
  39.     lis.onHTTPError = function(file:FileReference, httpError: Number):Void {   
  40.         ExternalInterface.call("onUploaderHTTPError", httpError, file.name);   
  41.     }   
  42.        
  43.     var list:Array = fileRefList.fileList;   
  44.     var item:FileReference;   
  45.     // 最终还是将文件分单次传到指定上传页面进行处理   
  46.     for(var i:Number = 0; i < list.length; i++) {   
  47.         item = list[i];   
  48.         item.addListener(lis);   
  49.         item.upload(uploadUrl);   
  50.     }   
  51. }   
// 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[i];
item.addListener(lis);
item.upload(uploadUrl);
}
}


至于客户端的处理，只需要将as中自动调用的几个js函数实现即可。最后的页面代码如下：

Java代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
  2. <html>   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   
  5. <title>Insert title here</title>   
  6. </head>   
  7. <body>   
  8. <input type="button" value="open" οnclick="openUploadDialog();"/>   
  9. <input type="button" value="upload" οnclick="uploadFiles();"/>   
  10.   
  11. <div id="flashPanel"></div>   
  12.   
  13. </body>   
  14. <script type="text/javascript">   
  15. var flash = createUploadFlash(document.getElementById('flashPanel'), 'upload.swf', 'FlashUpload.ashx')   
  16. // 打开文件对话框   
  17. function openUploadDialog() {   
  18.     flash.fu_open_dialog();   
  19. }   
  20. // 上传文件   
  21. function uploadFiles() {   
  22.     flash.fu_begin_upload();   
  23. }   
  24.   
  25. // 选择文件以后   
  26. function onUploaderSelect(list) {   
  27.     alert(list);   
  28. }   
  29.   
  30. // 上传完一个文件以后   
  31. function onUploaderComplete(name) {   
  32.     alert(name);       
  33. }   
  34.   
  35. // 上传文件出错时   
  36. function onUploaderHTTPError(number, name) {   
  37.     switch (number) {   
  38.         case 413:   
  39.             alert("文件" + name + "大于10K，不能上传");   
  40.             break;       
  41.     }   
  42. }   
  43. /**  
  44. * 创建一个flash。主要是在ie7里边需要用鼠标点击才能激活flash，通过动态生成flash的方式可以绕过这一点。  
  45. * @param panel 用来放置flash的div  
  46. * @param flashUrl flash的地址  
  47. * @param uploadUrl 用来出来上传文件的地址  
  48. */  
  49. function createUploadFlash(panel, flashUrl, uploadUrl){   
  50.     var code = '<object classid="clsid:d27cdb6e-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">\   
  51.         <param name="allowScriptAccess" value="sameDomain" />\   
  52.         <param name="movie" value="' + flashUrl + '" />\   
  53.         <param name="quality" value="high" />\   
  54.         <param name="bgcolor" value="#ffffff" />\   
  55.         <param name="FlashVars" value="upload_url=' + uploadUrl + '" />\   
  56.         <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" />\   
  57.     </object>';   
  58.     panel.innerHTML = code;   
  59.     return window.document.flashObject;   
  60. }   
  61.   
  62. </script>   
  63. </html>   
<!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="clsid:d27cdb6e-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，但动态生成以后，用后者就不能正常被访问到了，可能的原因是加载需要一定的延时，有待研究。

通过这样的方式实现文件上传，一则能解决掉多选问题和文件类型过滤问题，另外也能实现文件的无刷新上传，可以在图片上传的同时去进行别的工作。


http://www.ppmy.cn/news/492609.html

相关文章

android qq分享纯图片,手机照片批量上传QQ空间一键分享省流量

android qq分享纯图片,手机照片批量上传QQ空间一键分享省流量

【IT168 资讯】十一双假期刚刚结束&#xff0c;无论回家还是出游&#xff0c;不管是家里的庭院小景还是一路上的美景扑面&#xff0c;你一定会拿起手机不断按下快门&#xff0c;记录每一个美的瞬间。如今长假归来&#xff0c;我们都希望能够马上和好友一起分享假期的美景趣事。…
阅读更多...
阿里面试很难吗？不是有手就行吗？

阿里面试很难吗？不是有手就行吗？

我一直想写点什么&#xff0c;但当时我觉得在得到几家大厂的offer之后再谈会更有说服力。但从目前的结果来看&#xff0c;结果并不十分令人满意。 去年年底&#xff0c;我陆续面试了一些公司&#xff0c;比如迅雷、OPPO、阿里巴巴等。当时&#xff0c;我并没有做任何准备&#…
阅读更多...
PTGUI全景合成软件使用教程之镜头参数设置

PTGUI全景合成软件使用教程之镜头参数设置

拍摄全景照片尽量选择大广角或者鱼眼镜头进行拍摄&#xff0c;这样合成一张全景照片所需要的照片数量大为减少&#xff0c;照片数量越少合成全景照片难度越小&#xff0c;但相应的照片成像会有所下降&#xff0c;手机观赏的话影响不大。 现在大部分拍摄所使用的一些广角、鱼眼或…
阅读更多...
HTB Popcorn[Hack The Box HTB靶场]writeup系列4

HTB Popcorn[Hack The Box HTB靶场]writeup系列4

本题是retire的第四题Popcorn 目录 0x00 靶机情况 0x01 扫描端口 0x02 web目录文件扫描 0x03 get webshell 0x04 提权 0x00 靶机情况 本题是linux的靶机&#xff0c;整体看起来难度在3-4之间&#xff0c;比之前的题目有了一些难度&#xff0c;不过做过vulnhub的题目之后&…
阅读更多...
CLR系列：浅析泛型的本质

CLR系列：浅析泛型的本质

泛型早在.net2.0就出来了&#xff0c;大家已经对它的使用很熟悉了&#xff0c;在工作中也大量的使用过它&#xff0c;但是大家对其工作原理&#xff0c;以及MS针对泛型对CLR做了那些工作是否了解呢。本文就是对泛型的本质进行讲解&#xff0c;希望能对大家有所帮助。 1.引入泛型…
阅读更多...
颜色分类——荷兰国旗

颜色分类——荷兰国旗

题目来源 颜色分类_牛客题霸_牛客网 题目 给定一个包含红色&#xff0c;白色&#xff0c;蓝色&#xff0c;一同 n 个元素的数组&#xff0c;对其进行排序使得相同的颜色相邻并且按照红色&#xff0c;白色&#xff0c;蓝色的顺序排序。 数组中 0 代表红色&#xff0c;1 代表…
阅读更多...
【外网不好用】可以尝试添加dns即可解决上不去外网的问题。

【外网不好用】可以尝试添加dns即可解决上不去外网的问题。

【外网不好用】可以尝试添加dns即可解决上不去外网的问题。 参考文章&#xff1a; &#xff08;1&#xff09;【外网不好用】可以尝试添加dns即可解决上不去外网的问题。 &#xff08;2&#xff09;https://www.cnblogs.com/zhuzhubaoya/p/10856385.html &#xff08;3&…
阅读更多...
机房服务器连外网

机房服务器连外网

方法一&#xff1a;手机USB线共享网络给服务器。请选用质量好一点的最好是认证的USB数据线&#xff0c;如果数据线只能充电的话&#xff0c;可能会导致无法共享网络给服务器&#xff0c;需要自备一根USB数据线 安卓手机 1.小米手机设置&#xff0c;手机接数据线&#xff0c;将…
阅读更多...
最新文章

Copyright @ 2022~2023