`
Virgo_S
  • 浏览: 1153696 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

多选图片一次上传

    博客分类:
  • JS
阅读更多
做上传图片功能的时候,经常会遇到这样一个问题,有时候可能需要一次上传多张图片,而用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[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能不能给个例子呢?

相关推荐

    像flickr一样多选图片一次上传

    做上传图片功能的时候,经常会遇到这样一个问题,有时候可能需要一次上传多张图片,而用html中默认的上控件,却只能选定一个文件,且不能对文件的后缀进行筛选。需要一次上传多个文件的需求,往往可以通过添加多个...

    多选图片上传完整代码

    在IT行业中,多选图片上传是一项常见的功能,广泛应用于社交媒体、电子商务、个人博客等平台,让用户可以一次性上传多张图片。这个"多选图片上传完整代码"可能是一个开源项目,名为"PhotoPicker-master",旨在提供一...

    图片多选、滑动

    图片多选是指用户可以一次性选择多个图片的能力,而不是只能单个点击选取。这种功能在需要批量操作图片的场景下非常有用,例如删除、编辑、分享或上传图片。实现这一功能通常涉及以下技术: - 复选框:在每个图片...

    Vue2图片选择上传组件支持多选和拖放

    在HTML5中,`&lt;input type="file"&gt;`元素的`multiple`属性允许用户一次选择多个文件。Vue2组件可以通过监听`@change`事件来获取这些文件,并将它们存储在组件的data属性中。 3. **拖放功能**: HTML5的`drag and drop...

    安卓图片多选相关-Android图片选择预览九宫格图片控件拖拽排序九宫格图片控件.rar

    首先,**图片多选** 是一个用户界面中常见的功能,允许用户一次性选取多张图片,通常用于上传或者分享操作。在Android中,可以使用系统的`Gallery`或`FileChooser`组件来实现,但这些组件在新的API级别中已被弃用。...

    Android应用源码之自定义本地相册的功能,可以多选图片用.zip

    本压缩包提供了一份实现这一功能的源码示例,帮助开发者理解并实践如何在Android应用中创建一个支持多选图片的自定义相册。 首先,我们需要了解Android系统提供的媒体存储框架。Android提供了ContentResolver和...

    安卓图片多选相关-android图片选择器源码简单好用可拓展性强.zip

    1. **多选功能**:该源码支持用户一次性选择多张图片,这对于需要批量处理图片的应用来说非常实用。在实际应用中,这样的功能可以方便用户一次完成多张图片的上传或分享,提高用户体验。 2. **源码简单易用**:源码...

    swift-iOS图片多选multiimageselect

    1. **多选支持**:ZZImagePickerController允许用户一次选择多张图片,这通过设置最大选择数量来限制,开发者可以根据需求自定义这个值。 2. **预览和裁剪**:在选择图片后,用户可以预览所选图片,并进行裁剪,以...

    安卓图片多选相关-一个图片视频选择器功能非常全UI也很漂亮.rar

    在Android系统中,多选功能通常通过长按或者使用复选框来实现,让用户能够一次性选择多个图片或视频。这样的设计提高了用户交互的效率,特别是当用户需要批量处理或上传文件时。 该选择器的功能可能包括但不限于...

    图片批量上传控件,多个图片一次性上传

    在IT领域,图片批量上传控件是Web应用或者桌面应用中常见的一种功能,它允许用户一次选择并上传多个图片,极大地提高了工作效率,特别是在社交媒体、在线相册、电商平台等需要大量图片上传的场景下。本控件的独特之...

    支持多选的图片选择器

    1. **多选模式**:用户可以一次性选择多张图片,而不局限于单选。 2. **图片预览**:用户在选择图片前可以预览图片内容,确保选择的图片符合需求。 3. **选择限制**:可设定用户最多可选择的图片数量,防止滥用。 4....

    web页面多选上传文件的实现(浏览器-打开文件-可选多个文件来上传).源代码

    传统的文件上传方式通常只允许用户选择一个文件,但随着技术的发展,现在我们可以实现多选文件上传功能,让用户能够一次性上传多个文件,极大地提高了用户体验。本教程将探讨如何在网页中实现多选文件上传,基于提供...

    手机端多图片上传

    - **上传策略**:可以采用批量上传或者分批上传的方式,批量上传一次性发送所有图片,而分批上传则根据网络状况和图片数量分批发送,以减少网络延迟。 - **进度反馈**:在上传过程中展示进度条,让用户了解上传...

    相册图片多选

    在移动应用开发中,"相册图片多选"是一个常见的功能需求,特别是在社交、分享类应用中,用户可能需要一次性选择多张图片进行上传或分享。这个功能涉及到Android和iOS等平台的多媒体处理、UI设计以及用户体验等多个...

    最强图片多选上传示例 可多次多选择可删除可预览 jQuery+Ashx 异步上传

    最强图片上传示例 可多次多选择可删除可预览 jQuery+Ashx 异步上传 史上最强图片上传示例。jQuery+Ashx异步上传,有源代码。 每次可选择多张图片,可多次选择,可预览,上传前可删除已选择的任意图片。 任何时候仅...

    一款简单好用的ASP批量上传图片程序源码

    ASP批量上传图片程序是Web开发中的一个常见需求,特别是在内容管理系统、论坛或电子商务网站中,用户可能需要一次性上传多张图片。本程序基于KindEditor,这是一款流行的富文本编辑器,提供了图片上传功能。...

    (最新版本)HTML5批量图片上传插件支持多个图片上传功能

    这样,用户就可以在文件选择对话框中选择多个图片文件,然后一次性上传。 实现批量图片上传还需要后端的支持,因为服务器需要处理这些多文件的请求。常见的处理方式是使用multipart/form-data编码的HTTP请求,这是...

    安卓图片多选相关-选择多张照片上传.rar

    此外,专门的多选图片库如` Auswahl`、`ImagePicker`或`SimpleImagePicker`提供了更便捷的API,可以方便地集成到项目中,支持用户一次性选择多张图片。 2. **Intent选择器**:Android系统本身提供了通过Intent启动...

    android 相册图片多选

    9. **性能优化**:对于大量图片的处理,注意内存管理,避免一次性加载所有图片导致内存溢出。利用图片库的缓存机制和适当的缩略图尺寸来优化性能。 10. **兼容性测试**:由于Android设备的多样性,确保在不同版本和...

    相册多选源码

    首先,"相册多选"功能是让用户能够方便地从手机相册中一次性选择多张图片,通常用于社交媒体分享、图片编辑或者上传等场景。这种功能的实现涉及到系统权限获取、图片加载优化、UI设计等多个方面。 1. **权限获取**...

Global site tag (gtag.js) - Google Analytics