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 += "\nError #" + 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表示允许访问的域名。
转载于:https://www.cnblogs.com/alexandra/p/5780089.html
plupload文件上传插件相关推荐
- plupload文件上传插件使用
官方文档:http://www.phpin.net/tools/plupload/ //实例化组件 //附件1上传路径 var dirFile1 = '/upload/htfj/rchtfj/${da ...
- 20+ 个很棒的 jQuery 文件上传插件或教程(此文值得“推荐”和“收藏”)
文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验.本文介绍20个jQuery的文件上传插件,其中有一些是教程. 1. Plupload Plupload ...
- jquery 文件上传插件_10个jQuery文件上传插件
jquery 文件上传插件 这篇热门文章于2016年7月更新,以反映文件上传插件的当前状态. 有关旧文章的评论已删除. 使用Ajax实施文件上传可能非常困难,特别是如果您需要拖放支持,图像预览或进度条 ...
- js插件---IUpload文件上传插件(包括图片)
js插件---IUpload文件上传插件(包括图片) 一.总结 一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...
- fileupload的回调方法_jQuery File Upload文件上传插件使用详解
本篇教程介绍了jQuery File Upload文件上传插件使用详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < jQuery File Upload 是一个 ...
- jquery文件上传插件|进度条
jquery文件上传插件|进度条 一.Uploadify 官网:http://www.uploadify.com/ 下载地址:http://down.51cto.com/data/577863 详细参 ...
- jQuery 文件上传插件:uploadify、swfupload
jQuery 文件上传插件: uploadify.swfupload
- ajax 批量上传图片插件,jQuery多文件上传插件jquery.imageuploader.js
插件描述:jQuery多文件上传插件jquery.imageuploader.js,可以同时上传多个文件并支持拖拽上传 jquery.imageuploader.js 一款jquery多文件上传插件. ...
- uploadify多文件上传插件
这个插件是兼容IE8及以上版本的,实现了基本功能,底部有下载连接 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transiti ...
- jquery uploadify 多文件上传插件 使用经验
2019独角兽企业重金招聘Python工程师标准>>> Uploadify 官网:http://www.uploadify.com/ 一.如何使用呢? 官网原文:http://www ...
最新文章
- pytorch 忽略层权重
- python与excel的差别-python3与Excel的完美结合
- 【音乐理论】音与音高 ( 音域 | 音符表示 )
- Android应用程序键盘(Keyboard)消息处理机制分析(14)
- linux各种误删文件恢复方法(经典强推)
- Shell 变量--shell教程
- I.MX6 system.img unpack repack
- 查看MySQL数据库大小
- mysql管理系统需求分析_教学管理系统需求分析报告
- Github下载 arduino库下载
- latex插入pdf
- 转:Provisioning profile XXXX can't be found
- 数据库优化——慢查询MySQL定位优化流程
- P2P之UDP穿透NAT的原理与实现(附源代码)
- 我的世界圈服务器领地显示无效领地,我的世界领地圈地指令大全 Residence领地插件指令...
- QT实现文本编辑器(简易版)
- 算法-第四版-练习1.3.19解答
- 運命命运 (日剧《命运警察》插曲)歌手:片寄涼太日语罗马音注释
- ESFP型人格的爱情分析,ESFP型人格的职业分析
- 在windows中要使用计算机进行高级,2012年9月计算机等考《一级MS Office》全真模拟试卷...