plupload文件上传插件

 

一 资源文档

二 基本使用

三 可能遇到的问题

一 资源文档

Git仓库地址：https://github.com/moxiecode/plupload

一个中文速查：http://www.cnblogs.com/2050/p/3913184.html

可能有用的demo: http://chaping.github.io/plupload/demo/index.html

二 基本使用

html:

<ul id="filelist"></ul>
<br />
<div id="container">
    <a id="browse" href="javascript:;">[Browse...]</a> 
    <a id="start-upload" href="javascript:;">[Start Upload]</a>
</div>
<br />
<pre id="console"></pre>

js:

<script type="text/javascript">
var uploader = new plupload.Uploader({
    browse_button: 'browse',
    url: 'upload.php'
});
 
uploader.init();
 
uploader.bind('FilesAdded', function(up, files) {
    var html = '';
    plupload.each(files, function(file) {
        html += '<li id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></li>';
    });
    document.getElementById('filelist').innerHTML += html;
});
 
uploader.bind('UploadProgress', function(up, file) {
    document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
});
 
uploader.bind('Error', function(up, err) {
    document.getElementById('console').innerHTML += "
Error #" + err.code + ": " + err.message;
});
 
document.getElementById('start-upload').onclick = function() {
    uploader.start();
};
</script>

主要是使用options配置参数，使用内置函数添加方法，使用init()方法初始化uploader。

 

1 Options( 配置参数)

只有两个option是必须的:  browse_button和url，剩下的都是可选的。

browse_button可以是DOM元素本身或者它的id。

url是服务端的fileupload handler

2 Events（各种事件）

常用的事件：

Init：当Plupload初始化完成后触发

PostInit：当Init事件发生后触发

FilesAdded：当文件添加到上传队列后触发

FileUploaded：当队列中的某一个文件上传完成后触发

UploadComplete：当上传队列中所有文件都上传完成后触发

Error：当发生错误时触发

可以根据error code捕捉到各种错误，各种错误码在plupload命名空间上的一些属性都可以找到。

3 Properties（plupload实例属性）

常用的属性：

id: uploader实例的唯一id

state: 整个上传的当前状态，可能是plupload.STARTED 或者 plupload.STOPPED. 可以通过stop/start方法控制. 默认值值STOPPED。

files: 当前上传队列，是一个文件实例的数组。

total：总的上传进度信息。包括多少文件已经上传完成，进度百分比等。

4 Methods(plupload实例方法)

常用的方法：

init()

初始化uploader实例并添加内部事件监听函数。

start()

开始上传队列文件

stop()

停止上传队列文件

5文件对象的属性和方法

在很多事件监听函数中，都会提供文件对象。其中FilesAdded，FilesRemoved和UploadComplete提供的是文件对象的数组，因为plupload允许同时选取多个文件。文件对象的属性包括name(文件名)，type(文件类型)，size(文件大小等)，status（文件状态等）。文件方法包括getNative()(获取原生的文件对象), getSource()(获取mOxie.File 对象)，关于oMoxie,后面会说明。

6 plupload命名空间上的一些属性

主要是文件对象的status属性, plupload实例的state属性和各种错误的error code

1）state: STOPPED(1)， STARTED(2)

2）status：QUEUED（1），UPLOADING（2）， FAILED（4），DONE，（5）

3）error code:

HTTP_ERROR(-200): 发生http网络错误时

FILE_SIZE_ERROR(-600): 当选择的文件太大时

FILE_EXTENSION_ERROR(-601); 当选择的文件类型不符合要求时

FILE_DUPLICATE_ERROR(-602)； 当选取了重复的文件而配置中又不允许有重复文件时

IMAGE_DIMENSIONS_ERROR(-702)： 当文件大小超过了plupload所能处理的最大值时

三 可能遇到的问题

1 关于ie9 runtimes

Plupload是一个multi-runtime的文件上传API。

runtimes默认值为: "html5,flash,silverlight,html4"。可以在options中配置。

一般情况下，不需要配置该参数，因为Plupload默认会根据你的其他的参数配置来选择最合适的上传方式。如果没有特殊要求的话，Plupload会首先选择html5上传方式，如果浏览器不支持html5，则会使用flash或silverlight，如果前面两者也都不支持，则会使用最传统的html4上传方式。

在ie9浏览器下，不支持flash，需要使用oMxie的polyfill，借助的就是Moxie.swf。需要在options中配置两个option：flash_swf_url和silverlight_xap_url。分别对应flash上传组件的url地址和silverlight上传组件的url地址，如果是相对路径，则相对的是调用Plupload的html文档。

当找不到Moxie.swf文件时，runtimes会fallback到html4。下面两个截图就是找不到文件和找到文件时情况，moxie-shim的class会不同。当ie9下出现moxie-shim-html4，通常是没有找到Moxie.swf文件，会出现ie9的一些兼容性问题，比如浏览图片按钮不好点击或者前端预览图片无法显示等问题。

了解oMxie：https://github.com/moxiecode/moxie/wiki/API

2关于flash跨域请求

在Flash中发起HTTP请求外部网站的资源时会引起Flash的跨域问题。

出现跨域问题时，Flash会先访问对方网站根目录的crossdomain.xml文件。

crossdomain.xml文件可以定义哪些网站有权限访问本网站的资源。

所以如果我们要允许别的网站跨域访问本网的资源需要在根目录下加入crossdomain.xml文件。

<?xml version="1.0"?>

<cross-domain-policy>

    <allow-access-from domain="wuage.com" />

</cross-domain-policy>

配置很简单，domain表示允许访问的域名。