- 浏览: 1151794 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
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 2036转自:http://www.iteye.com/topic/1 ... -
JavaScript实现双击编辑
2008-12-09 19:20 3141其实就是元素的替代 <!DOCTYPE html ... -
JavaScript时间选择控件
2008-12-09 15:42 2842<!DOCTYPE HTML PUBLIC &quo ... -
ExtJS学习笔记 layout的9种样式风格总结
2008-12-08 17:09 35780extjs的容器组件都可以设置它的显示风格,它的有效值有 ab ... -
ExtJS学习笔记二 Tree的Treepanel使用
2008-12-05 11:04 11134最近学习extjs发现了一个问题,extjs是一个Ja ... -
extjs学习资源
2008-12-02 16:49 1948ExtJs官方网 http://www.extjs.com/ ... -
extjs的Tooltips与QuickTips
2008-12-02 16:03 6394ExtJs是通过Ext.ToolTip和Ext.QuickTi ... -
ExtJS学习笔记一 ExtJS开发环境的配置
2008-11-26 11:03 3447<link rel="stylesheet ... -
自定义对象
2008-10-28 14:55 1199一,概述 在Java语言中,我们可以定义自己的类,并根据这些 ... -
javascript this详解
2008-10-28 13:04 1266在面向对象编程语言中,对于this关键字我们是非常熟悉的。比如 ... -
使用external实现javscript调用flash的function
2008-08-18 15:22 1563先看Flash帮助的对于addCallback相关说明: p ... -
Javascript与flash交互通信控制的方法
2008-08-18 14:55 3322下面是一些在Flash和使用Javascript的HTML文件 ... -
控制 Flash Player 的 JavaScript 方法一览表
2008-08-18 12:14 4520播放动画:Play() 例:(网页中的 Flash id) ... -
利用数组提高IE拼接字符串效率
2008-08-17 15:54 1553今天终于静下心来研究程序的效率问题,竟然发现一个普通的循环拼接 ... -
多文件上传组件SWFUpload java环境小例子
2008-08-16 23:32 8943前几周做一个web企业项目,用户一定要求要有批量上传功能,而且 ... -
JS三种编解码方式
2008-08-14 12:28 1731js对文字进行编码涉及3个函数:escape,encodeUR ... -
深入JavaScript(apply和call函数)
2008-07-31 14:22 44941、关于javascript的apply和 ... -
关于JavaScript中apply与call的用法意义及区别
2008-07-31 14:12 2755JavaScript中有一个call和ap ... -
prototype实例一则
2008-07-31 13:21 3111为什么我还没有点击链接 zhuanyi函数就运行了。。。 & ... -
javascript中的触发器传递参数
2008-07-31 11:00 3128在一个结构良好的网页 ...
相关推荐
做上传图片功能的时候,经常会遇到这样一个问题,有时候可能需要一次上传多张图片,而用html中默认的上控件,却只能选定一个文件,且不能对文件的后缀进行筛选。需要一次上传多个文件的需求,往往可以通过添加多个...
在IT行业中,多选图片上传是一项常见的功能,广泛应用于社交媒体、电子商务、个人博客等平台,让用户可以一次性上传多张图片。这个"多选图片上传完整代码"可能是一个开源项目,名为"PhotoPicker-master",旨在提供一...
图片多选是指用户可以一次性选择多个图片的能力,而不是只能单个点击选取。这种功能在需要批量操作图片的场景下非常有用,例如删除、编辑、分享或上传图片。实现这一功能通常涉及以下技术: - 复选框:在每个图片...
在HTML5中,`<input type="file">`元素的`multiple`属性允许用户一次选择多个文件。Vue2组件可以通过监听`@change`事件来获取这些文件,并将它们存储在组件的data属性中。 3. **拖放功能**: HTML5的`drag and drop...
首先,**图片多选** 是一个用户界面中常见的功能,允许用户一次性选取多张图片,通常用于上传或者分享操作。在Android中,可以使用系统的`Gallery`或`FileChooser`组件来实现,但这些组件在新的API级别中已被弃用。...
本压缩包提供了一份实现这一功能的源码示例,帮助开发者理解并实践如何在Android应用中创建一个支持多选图片的自定义相册。 首先,我们需要了解Android系统提供的媒体存储框架。Android提供了ContentResolver和...
1. **多选功能**:该源码支持用户一次性选择多张图片,这对于需要批量处理图片的应用来说非常实用。在实际应用中,这样的功能可以方便用户一次完成多张图片的上传或分享,提高用户体验。 2. **源码简单易用**:源码...
1. **多选支持**:ZZImagePickerController允许用户一次选择多张图片,这通过设置最大选择数量来限制,开发者可以根据需求自定义这个值。 2. **预览和裁剪**:在选择图片后,用户可以预览所选图片,并进行裁剪,以...
在Android系统中,多选功能通常通过长按或者使用复选框来实现,让用户能够一次性选择多个图片或视频。这样的设计提高了用户交互的效率,特别是当用户需要批量处理或上传文件时。 该选择器的功能可能包括但不限于...
在IT领域,图片批量上传控件是Web应用或者桌面应用中常见的一种功能,它允许用户一次选择并上传多个图片,极大地提高了工作效率,特别是在社交媒体、在线相册、电商平台等需要大量图片上传的场景下。本控件的独特之...
1. **多选模式**:用户可以一次性选择多张图片,而不局限于单选。 2. **图片预览**:用户在选择图片前可以预览图片内容,确保选择的图片符合需求。 3. **选择限制**:可设定用户最多可选择的图片数量,防止滥用。 4....
传统的文件上传方式通常只允许用户选择一个文件,但随着技术的发展,现在我们可以实现多选文件上传功能,让用户能够一次性上传多个文件,极大地提高了用户体验。本教程将探讨如何在网页中实现多选文件上传,基于提供...
- **上传策略**:可以采用批量上传或者分批上传的方式,批量上传一次性发送所有图片,而分批上传则根据网络状况和图片数量分批发送,以减少网络延迟。 - **进度反馈**:在上传过程中展示进度条,让用户了解上传...
在移动应用开发中,"相册图片多选"是一个常见的功能需求,特别是在社交、分享类应用中,用户可能需要一次性选择多张图片进行上传或分享。这个功能涉及到Android和iOS等平台的多媒体处理、UI设计以及用户体验等多个...
最强图片上传示例 可多次多选择可删除可预览 jQuery+Ashx 异步上传 史上最强图片上传示例。jQuery+Ashx异步上传,有源代码。 每次可选择多张图片,可多次选择,可预览,上传前可删除已选择的任意图片。 任何时候仅...
ASP批量上传图片程序是Web开发中的一个常见需求,特别是在内容管理系统、论坛或电子商务网站中,用户可能需要一次性上传多张图片。本程序基于KindEditor,这是一款流行的富文本编辑器,提供了图片上传功能。...
这样,用户就可以在文件选择对话框中选择多个图片文件,然后一次性上传。 实现批量图片上传还需要后端的支持,因为服务器需要处理这些多文件的请求。常见的处理方式是使用multipart/form-data编码的HTTP请求,这是...
此外,专门的多选图片库如` Auswahl`、`ImagePicker`或`SimpleImagePicker`提供了更便捷的API,可以方便地集成到项目中,支持用户一次性选择多张图片。 2. **Intent选择器**:Android系统本身提供了通过Intent启动...
9. **性能优化**:对于大量图片的处理,注意内存管理,避免一次性加载所有图片导致内存溢出。利用图片库的缓存机制和适当的缩略图尺寸来优化性能。 10. **兼容性测试**:由于Android设备的多样性,确保在不同版本和...
首先,"相册多选"功能是让用户能够方便地从手机相册中一次性选择多张图片,通常用于社交媒体分享、图片编辑或者上传等场景。这种功能的实现涉及到系统权限获取、图片加载优化、UI设计等多个方面。 1. **权限获取**...