zoukankan      html  css  js  c++  java
  • php SWFUpload多文件上传

    什么是SWFUpload

    SWFUpload是一个网站前端文件上传组件。SWFUpload通过flash+JavaScript,实现在不刷新网页的条件下,多个文件批量上传(实际上是逐个上传)、以及显示上传进度。

    SWFUpload基本原理

    1、传统的html表单文件上传

    传统的文件上传是使用下面这种Form的:

    1 <form id="file-form" action="http://www.gearcode.com/upload.php" enctype="multipart/form-data" method="post">
    2     <input name="filename" type="file" />
    3     <input type="submit" value="上传" />
    4 </form>

    这样的表单,每个input file只能选择一个文件,如果用户想批量上传,则需要使用js动态的向表单中添加“<input type="file" name="filename"/>”。用户则需要去点击每一个input file的“浏览”按钮,打开选择文件的窗口去逐个选择文件。而不是打开一个能选择多个文件的窗口,一次性的使用ctrl或shift等快捷键选择一个或多个文件。

    而且,当用户选择好文件,点击上传后,表单就会提交出去,至于文件上传的进度如何,上传速度怎样,都不得而知。

    2、使用SWFUpload后的上传

    SWFUpload通过向网页中插入一个flash按钮,让用户点击来弹出文件选择的对话框。也就是说,选择文件对话框,是由swfupload.swf中弹出的,当然这需要用户点击这个flash才可以。所以swfupload在初始化时需要设置它显示出来的按钮的样式,例如宽、高、背景色、字体、内间距、图片等等……。除了这些样式,还需要设置按钮显示的位置,以及其他一些配置,这些常用配置在本文的后面会详细介绍。

    因为SWFUpload的选择文件对话框是由flash弹出的,所以这个对话框是可以选择多个文件的。选择好文件以后,swfupload.swf会回调一些javascript函数,将选择文件的一些基本信息作为参数传给这些回调函数,以便开发者通过设置这些回调函数,来改变html从而将这些文件信息显示到页面中。

    在选择好要上传的文件后,这些文件就会被加入到swfupload的上传队列中,一旦调用swfupload实例的“startUpload()”函数,swfupload就会通过flash将文件上传到我们指定的地址,这个上传地址也是可以在实例化SWFUpload时设置的,而这个地址则是一个接收文件的action,例如传统文件上传表单中的action="upload.PHP"。这里需要注意的是,调用startUpload后,swfupload只会将上传文件队列中的第一个未上传的文件提交出去,而不是同时将上传文件队列中所有的文件提交出去,如果在一个文件上传完毕后,再次调用startUpload,swfupload就会开始上传队列中下一个没有上传的文件。所以,如果想实现自动批量上传的话,只需要在上传完成的回调函数中,去调用startUpload就可以了。

    在上传过程中,swfupload会有很多的事件产生,例如上传开始、上传进度变化、上传出错、上传成功、上传完成……我们可以设置这些事件的回调函数,swfupload在发生这些事件的时候,会去调用我们的回调函数,并将相应的信息以参数的形式发送给我们的回调函数。这样我们便可以通过处理这些事件来动态的显示文件上传的状态、进度等信息了。

    开始前的准备

    1、获取SWFUpload

    SWFUpload的官方地址为:http://www.swfupload.org/,SWFUpload的下载放在了google code上:http://code.google.com/p/swfupload/downloads/list,此文使用的是:SWFUpload v2.2.0.1

    2、在线文档

    http://demo.swfupload.org/Documentation/

    3、SWFUpload 2.2 的Demos

    http://demo.swfupload.org/v220/index.htm

    使用SWFUpload上传文件

    1、初始化SWFUpload

    首先将下载下来的“SWFUpload v2.2.0.1 Core”压缩包解压,会得到一个swfupload.js、以及一个swfupload.swf(在Flash目录中),将这两个文件copy到你的项目中。压缩包中还会有一些其他的文件,例如英文的文档、ChangeLog、License等文件,不在本文讨论范围内,实际应用时也无需导入到你的项目中。

    在使用SWFUpload上传组件的页面引入swfupload.js:

    1 <script type="text/javascript" src="http://www.gearcode.com/lib/swfupload/swfupload.js" type="text/javascript"></script>

    这个swfupload.js是SWFUpload组件提供的一个javascript类库,是用来初始化及设置swfupload.swf的。其中有一个名为“SWFUpload”的function,我们通过创建这个function的实例来初始化SWFUpload,同时传入一些初始化配置信息。需要注意的是,一定要在网页加载完成后再去new这个SWFUpload,因为swfupload.swf是通过替换掉页面中的一个html元素来确定自己显示出来的位置的。所以如果在这个html元素还没被创建出来的时候,就去实例化SWFUpload的话,就会出现javascript错误。

    实例化SWFUpload,并设置初始化参数:

    01 var swfu;
    02 // 这里使用了JQuery,在body onload后,也就是网页加载完成后,实例化SWFUpload。
    03 $(function(){
    04     swfu = new SWFUpload(config == undefined ? {
    05         upload_url : path+"/fileUpload.action",
    06         flash_url : path+"/plugin/uploader/SWFUpload/swfupload.swf",
    07         file_size_limit : "20 KB",
    08         file_types : "*.jpg;*.jpeg;*.png;*.bmp;*.gif",
    09         file_types_description : "All Image Files",
    10         file_post_name : "fileQueue",
    11  
    12         button_placeholder_id : "spanSWFUploadButton",
    13         button_width : 60,
    14         button_height : 20,
    15         button_text : "<b>添加文件</b>",
    16         button_text_left_padding : 3,
    17         button_text_top_padding : 2,
    18         button_cursor : SWFUpload.CURSOR.HAND,
    19  
    20         //handler
    21         file_queued_handler : Handler.fileQueued,
    22         file_queue_error_handler : Handler.fileQueueError,
    23         upload_complete_handler : Handler.uploadComplete,
    24         upload_start_handler : Handler.uploadStart,
    25         upload_progress_handler : Handler.uploadProgress,
    26         upload_success_handler : Handler.uploadSuccess
    27     });
    28 });

    通过上面的代码可以创建一个SWFUpload的实例“swfu”,后面对文件队列的操作都需要通过调用这个实例的方法来完成。

    初始化参数中“button_placeholder_id”为页面上的一个html节点的ID,成功初始化SWFUpload后,会将此节点替换为swfupload.swf。其他以“button_”开头的参数都是用来设置swfupload.swf的显示样式的。大部分初始化参数非常简单,这里不一一赘述,用户可以查阅前面提到的SWFUpload的在线文档。这里有一点需要注意,初始化SWFUpload后,页面上对应的html节点被替换为我们设置的flash按钮,但如果你的页面不是以http协议打开的,点击这个按钮是不会弹出选择文件对话框的。

    例如,我直接在桌面上的文件夹中打开页面:

    file:///C:/Documents and Settings/JasonLee/桌面/upload/upload.html

    以这样的方式打开页面,点击flash按钮是不会弹出选择文件对话框的。所以测试的时候要将页面上传部署到服务器上,以http协议打开,例如:

    http://www.gearcode.com/demo/file-upload/upload.html

    2、开始上传

    完成初始化以后,点击flash上传按钮便会打开选择文件对话框。选择好文件后,对话框关闭,被选择的文件将进入上传队列。如果要开始上传,只需要调用SWFUpload的startUpload函数即可,例如:

    1 swfu.startUpload();

    但是如果队列中有多个文件,调用startUpload()后只会上传第一个未上传的文件,所以前面提到了,SWFUpload的批量上传实际上就是自动逐个上传文件。如果要实现自动批量上传只需要在上传文件成功后,再次调用开始上传方法。我们可以通过设置SWFUpload的handler函数来实现:

    1 upload_complete_handler: function(file) {
    2     this.startUpload();
    3 }

    3、handler函数

    SWFUpload在工作的过程中,会产生很多事件。这些事件对我们来说有很多用处(例如想在页面中显示文件大小、上传进度、速度等信息),我们可以设置handler函数来监控这些事件,当SWFUpload触发这些事件时,会主动调用我们设置的回调函数,并将文件信息作为参数传递给我们的回调函数。

    SWFUpload的handler函数有很多,这里只介绍以下6个常用的事件回调函数:

    事件名称初始化参数名称参数事件触发
    fileQueued file_queued_handler file 每个文件进入上传队列时触发
    fileQueueError file_queue_error_handler file, errorCode, message 每个文件进入上传队列时,如果出错则触发
    uploadStart upload_start_handler file 每个文件开始上传时触发
    uploadProgress upload_progress_handler file, bytesLoaded, bytesTotal 每个文件的上传进度发生改变时触发
    uploadSuccess upload_success_handler file, serverData 每个文件上传成功后触发
    uploadComplete upload_complete_handler file 每个文件上传完毕后触发

    例如我需要监听uploadProgress事件,则需要在SWFUpload初始化时,设置upload_progress_handler参数的值:

    1 swfu = new SWFUpload({
    2     //省略其他初始化参数...
    3     upload_progress_handler: uploadProgress
    4 });

    然后再建立监听事件的回调函数:

    1 function uploadProgress(file, bytesLoaded, bytesTotal) {
    2     //...
    3 }

    这样,在文件上传时,每次上传进度发生改变,都会调用uploadProgress这个函数,并且将文件的信息、已经上传的字节数、文件的总字节数发送给回调函数。

    其他的回调函数使用方法都一样,这里就不一一介绍了,最后介绍一下回调函数的参数file。几乎所有的回调函数都会将file作为参数,file是一个javascript对象,其结构如下(来自官方的在线文档):

    {
        id : string,
        index : number,
        name : string,
        size : number,
        type : string,
        creationdate : Date,
        modificationdate : Date,
        filestatus : number,
    }

    下面是file对象中的每个属性的简单说明:

    属性名类型说明
    id string SWFUpload为队列中的文件生成的ID
    index number 文件的索引值,使用getFile(index)可以获取该文件
    name string 原文件名,不包含原文件目录
    size number 文件的尺寸,单位:byte
    type string 文件类型
    creationdate Date 文件的创建时间
    modificationdate Date 文件的最后修改时间
    filestatus number 文件在上传队列中的状态,可以使用SWFUpload.FILE_STATUS比较值
  • 相关阅读:
    231. Power of Two
    204. Count Primes
    205. Isomorphic Strings
    203. Remove Linked List Elements
    179. Largest Number
    922. Sort Array By Parity II
    350. Intersection of Two Arrays II
    242. Valid Anagram
    164. Maximum Gap
    147. Insertion Sort List
  • 原文地址:https://www.cnblogs.com/missphp/p/6144381.html
Copyright © 2011-2022 走看看