- 浏览: 1138496 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
RebeccaZhong:
严重: StandardWrapper.Throwableco ...
三步发布java方式的rest服务 -
RebeccaZhong:
严重: StandardWrapper.Throwableco ...
三步发布java方式的rest服务 -
冷酷月光:
楼主。请教一下。arcgis for android 有提供地 ...
ArcGIS API For Android离线地图的实现 -
winney117:
请问如何GET已有网页上的指定内容?比如百度文库中的某一篇文章 ...
三步发布java方式的rest服务 -
zige1012:
您好,我想问问我想换个自己地图的切片,也有4层(L0-L3), ...
ArcGIS API For Android离线地图的实现
做上传图片功能的时候,经常会遇到这样一个问题,有时候可能需要一次上传多张图片,而用html中默认的上控件,却只能选定一个文件,且不能对文件的后缀进行筛选。需要一次上传多个文件的需求,往往可以通过添加多个上传控件来予以满足,比如百度空间的相册上传功能就是这样来实现的。不过,要实现对上传文件后缀的过滤,却始终无法通过常规的方法予以实现。
这两个功能真的这么难以实现吗?非也,看看flickr的上传功能即可获得明确的答复。
为什么能实现这样的功能呢?google了一下,谜底就揭晓了。原来,这是利用了flash的若干功能,通过javascript和actionscript的交互得以实现的。js和as的通讯以前有研究过,所以要实现起来非常简单。再到flash里边f1一下,关于上传方面的相关只是也差不多了解了,因此,接下来的事情的就只是顺水推舟的事情了。
最重要的还是flash代码的完善,最后的成果如下:
至于客户端的处理,只需要将as中自动调用的几个js函数实现即可。最后的页面代码如下:
这次功能的实现上,在其他方面都还很顺利得以实现,反而是在createUploadFlash这个函数的实现上遇到了一些麻烦。因为最后返回flash对象的时候经常不被正常地识别。如果这段代码不用js生成,那么用document.flashObject和dobument.getElementById('flashObject')都可以正常识别flashObject,但动态生成以后,用后者就不能正常被访问到了,可能的原因是加载需要一定的延时,有待研究。
通过这样的方式实现文件上传,一则能解决掉多选问题和文件类型过滤问题,另外也能实现文件的无刷新上传,可以在图片上传的同时去进行别的工作。
没了,很早以前搞的了
这两个功能真的这么难以实现吗?非也,看看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[i]; 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" onclick="openUploadDialog();"/> <input type="button" value="upload" onclick="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,但动态生成以后,用后者就不能正常被访问到了,可能的原因是加载需要一定的延时,有待研究。
通过这样的方式实现文件上传,一则能解决掉多选问题和文件类型过滤问题,另外也能实现文件的无刷新上传,可以在图片上传的同时去进行别的工作。
评论
4 楼
Virgo_S
2011-08-29
a523634095 写道
能否给个示例,QQ邮件:a523634095@qq.com
没了,很早以前搞的了
3 楼
a523634095
2011-08-29
能否给个示例,QQ邮件:a523634095@qq.com
2 楼
wgcniler
2009-11-12
能实现批量上传前对图片进行压缩么?
1 楼
gaodong1984
2009-10-12
LZ能不能给个例子呢?
发表评论
-
EXT新手建议:建立自己的工具箱(Toolkit)
2008-12-11 09:56 2001转自:http://www.iteye.com/topic/1 ... -
JavaScript实现双击编辑
2008-12-09 19:20 3101其实就是元素的替代 <!DOCTYPE html ... -
JavaScript时间选择控件
2008-12-09 15:42 2812<!DOCTYPE HTML PUBLIC &quo ... -
ExtJS学习笔记 layout的9种样式风格总结
2008-12-08 17:09 35697extjs的容器组件都可以设置它的显示风格,它的有效值有 ab ... -
ExtJS学习笔记二 Tree的Treepanel使用
2008-12-05 11:04 11060最近学习extjs发现了一个问题,extjs是一个Ja ... -
extjs学习资源
2008-12-02 16:49 1862ExtJs官方网 http://www.extjs.com/ ... -
extjs的Tooltips与QuickTips
2008-12-02 16:03 6352ExtJs是通过Ext.ToolTip和Ext.QuickTi ... -
ExtJS学习笔记一 ExtJS开发环境的配置
2008-11-26 11:03 3415<link rel="stylesheet ... -
自定义对象
2008-10-28 14:55 1140一,概述 在Java语言中,我们可以定义自己的类,并根据这些 ... -
javascript this详解
2008-10-28 13:04 1238在面向对象编程语言中,对于this关键字我们是非常熟悉的。比如 ... -
使用external实现javscript调用flash的function
2008-08-18 15:22 1530先看Flash帮助的对于addCallback相关说明: p ... -
Javascript与flash交互通信控制的方法
2008-08-18 14:55 3286下面是一些在Flash和使用Javascript的HTML文件 ... -
控制 Flash Player 的 JavaScript 方法一览表
2008-08-18 12:14 4482播放动画:Play() 例:(网页中的 Flash id) ... -
利用数组提高IE拼接字符串效率
2008-08-17 15:54 1509今天终于静下心来研究程序的效率问题,竟然发现一个普通的循环拼接 ... -
多文件上传组件SWFUpload java环境小例子
2008-08-16 23:32 8913前几周做一个web企业项目,用户一定要求要有批量上传功能,而且 ... -
JS三种编解码方式
2008-08-14 12:28 1704js对文字进行编码涉及3个函数:escape,encodeUR ... -
深入JavaScript(apply和call函数)
2008-07-31 14:22 44561、关于javascript的apply和 ... -
关于JavaScript中apply与call的用法意义及区别
2008-07-31 14:12 2717JavaScript中有一个call和ap ... -
prototype实例一则
2008-07-31 13:21 3068为什么我还没有点击链接 zhuanyi函数就运行了。。。 & ... -
javascript中的触发器传递参数
2008-07-31 11:00 3097在一个结构良好的网页 ...
相关推荐
做上传图片功能的时候,经常会遇到这样一个问题,有时候可能需要一次上传多张图片,而用html中默认的上控件,却只能选定一个文件,且不能对文件的后缀进行筛选。需要一次上传多个文件的需求,往往可以通过添加多个...
图片批量上传控件,多个图片一次性上传,不用任何dll,多很多用户需求有大量的帮助!
多选多个文件上传+图片预览。H5源代码支持PC浏览器端和手机移动端.zip
最强图片上传示例 可多次多选择可删除可预览 jQuery+Ashx 异步上传 史上最强图片上传示例。jQuery+Ashx异步上传,有源代码。 每次可选择多张图片,可多次选择,可预览,上传前可删除已选择的任意图片。 任何时候仅...
tinymce 官方只有单图片上传功能,本人试重网上查找多图片批量上传的例子,无奈找不到合适的,唯有自力更新,帮助更多的网友。
1.此功能可以在浏览时选择多选图片,选择打开,等待列表显示,然后点上传所有文件即可! 2.最小尺寸建议140*140. 3.图片名字尽量不要重名,特殊符号,或过长! 4.建议使用IE6或IE7,不要用遨游浏览器! 图片管理: 1.默认...
这并不符合用户的习惯,最好的用户习惯是用户选择完需要的图片,并可在本地预览,接着用户再次打开摄像头或图库再次选择图片,接着预览,对于不需要的图片删除,最后确定可以后,再一次性上传所有图片。显然这种方式...
1.新增一次浏览本地多选文件同时批量上传功能,即多文件上传 2.新增上传路径选择功能 3.新增上传成功后显示上传图片详细信息,并可直接查看图片和获得图片外链地址功能 4.后台新增图片外链网址修改功能 5.后台新增...
可自由设置字段类型、字段类型(单行文本、多行文本、下拉列表、数字、日期、单选按钮、多选按钮、电子邮箱、文件)、表单选项限制(功能启用时间限制、是否只允许会员提交、每个会员是否只允许提交一次),可按自定义...
一个很方便的相册图片选择器,可实现单选多选功能,也可是调用相机拍照。第一次上传代码还望大神们多多指教!
1.此功能可以在浏览时选择多选图片,选择打开,等待列表显示,然后点上传所有文件即可! 2.最小尺寸建议140*140. 3.图片名字尽量不要重名,特殊符号,或过长! 4.建议使用IE6或IE7,不要用遨游浏览器! 图片管理: 1.默认...
图三,图四 说明: 主页显示DVD功能,可以进行分页显示DVD信息,借出,归还,修改DVD信息的操作, 可以进行多选删除。可以显示DVD的图片,用户在未登陆的情况下会直接跳转到登陆页面。图五 说明: 在主页点击相关DVD...
1.新增一次浏览本地多选文件同时批量上传功能,即多文件上传 2.新增上传路径选择功能 3.新增上传成功后显示上传图片详细信息,并可直接查看图片和获得图片外链地址功能 4.后台新增图片外链网址修改功能 5.后台...
<br>7,强大的搜索功能,可以对系统内所有的功能模块进行搜索,可以使用关键词,通配符,作者名,发布日期等进行精确或模糊搜索,可以结合Google对整个网站进行一次性搜索。 <br>6,文章,下载,专栏部分,...
1.新增一次浏览本地多选文件同时批量上传功能,即多文件上传 2.新增上传路径选择功能 3.新增上传成功后显示上传图片详细信息,并可直接查看图片和获得图片外链地址功能 4.后台新增图片外链网址修改功能 5.后台...
19.3 上传文件一次完成 19.4 使用正则判断文件扩展名 19.5 多附件上传效果 19.6 上传控件内容清空 19.7 textarea显示记事本文件的内容 19.8 使用FSO读写文本文件 19.9 自动启动文件下载 19.10 创建Excel文件 19.11 ...
19.3 上传文件一次完成 19.4 使用正则判断文件扩展名 19.5 多附件上传效果 19.6 上传控件内容清空 19.7 textarea显示记事本文件的内容 19.8 使用FSO读写文本文件 19.9 自动启动文件下载 19.10 创建Excel文件 19.11 ...
增减文档内的页面:之前一次性拍摄和导入的图片会一次性生成一个文档,如果你需要在这个文档上作增减,需要进入该文档。进入后,选择右下方的“+”可以向文档里导入新图片,方法和上述过程一样,不再赘述。如果需要...
这种好处当您的栏目下有上万篇文章时越是明显,因为每次生成时不需要将所有页面重新生成一次,只需要根据预设定的生成最新更新的记录即可! 2、 网站模板与程序分离,支持多种标签调用,支持DIV+CSS,通过模板设计...
全球主动下载超过2亿次,安卓文件管理第一品牌。 ES 文件浏览器 ES File Explorer 中文版ES 文件浏览器 ES File Explorer 中文版 想更好地管理你的手机、平板、家里电脑和云端网盘?原生中文支持,全球上亿用户一致...