跨平台的文件上传插件:plupload
这货的优点:
支持多平台(Flash、HTML5、HTML4、Silverlight)
界面友好
大部分界面都可以通过CSS自定义。即使是纯Flash,也只是按钮不能自定义样式罢了
首先到官方网站下载
1.Plupload官方网站
2.GitHub
解压后。就可以在example
下查看示例
打开js/i18n
,你就可以看到很多JS文件。实际使用的时候,你可以复制你需要的文件。比如简体中文是zh-CN.js
然后在引入JS的最后加入这样一段代码(请根据实际情况更改):
<script type="text/javascript" src="zh_CN.js"></script>
刷新页面,你就会发现他已经变成了中文
plupload有两种方法。一种“不显山不显水”的方法。一切UI你自己定义。一种是自带UI的方法。这种方法更简单友好
首先,在网页里面准备一个按钮
<a id="pickfiles" href="#">选择文件</a> <a id="uploadfiles" href="#">上传文件</a>
然后,插入一段JS:
var uploader = new plupload.Uploader({ runtimes : 'silverlight,html4', //这里的意思是,有HTML4或者Silverlight的方式 browse_button : 'pickfiles', //按钮的ID url : 'upload.php', //提交的目标 …… init : { PostInit: function() { document.getElementById('uploadfiles').onclick=function(){ //绑定上传事件 uploader.start(); return false; }; }, …… } }); uploader.init();
我没有研究这个方法。所以也不多说。各位可以直接看官方文档
首先,在网页里面准备一个表单(为什么是表单?后面解释)
<form method="post" action="dump.php"> <div id="uploader"> <p>你的浏览器不支持Flash、Silverlight、HTML5</p> </div> <input id="ok" type="submit" value="完成" disabled/> </form>
然后,插入一段JS:
$(function() { var uploader=$("#uploader").plupload({ // General settings runtimes : 'html5,flash,silverlight,html4', url : 'upload.php', …… filters : { //过滤器 max_file_size : '2mb', //最大文件大小 //允许的文件类型 mime_types: [ {title : "Image files", extensions : "jpg,gif,png,jpeg"} ] }, views: { list: true, thumbs: true, // Show thumbs active: 'thumbs' }, flash_swf_url : 'Moxie.swf', //Flash,请根据实际地址修改。下同 silverlight_xap_url : 'Moxie.xap', complete:function(e,ui){ alert('上传完成'); $('#ok').removeAttr('disabled'); }, selected:function(e,ui){ $('#ok').attr('disabled','true'); } …… }); });
plupload还有个很实用的功能,可以自定义过滤器。例如我们限制一下,图片不能高于100
灵活起见,我们首先在filters里加一句
filters : { max_file_size : '2mb', //最大文件大小 //允许的文件类型 mime_types: [ {title : "Image files", extensions : "jpg,gif,png,jpeg"} ], min_img_width: 100 },
然后,在方法一的var uploader = new plupload.Uploader({
、方法二的var uploader=$("#uploader").plupload({
之前,加入一段代码:
plupload.addFileFilter('min_img_height', function(maxRes, file, cb) { var self = this, img = new o.Image(); function finalize(result,height) { //清理 img.destroy(); img = null; // if rule has been violated in one way or another, trigger an error if (!result) { self.trigger('Error', { code : plupload.IMAGE_DIMENSIONS_ERROR, message : "图片高度最小为"+maxRes+",你的图片只有"+height, file : file }); } cb(result); } img.onload = function() { finalize(img.height > maxRes, img.height); }; img.onerror = function() { finalize(false); }; img.load(file.getSource()); });
还有更多的自定义过滤器,自己看官方文档吧
这里我以php为例。我们将文件上传到SAE的Storage
<?php //不缓存 header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); @set_time_limit(); //SAE相关 define('DOMAIN','test'); define('DIR','image/'); //获取、生成文件名 if (empty($_FILES) || count($_FILES)<=0) exit('{"jsonrpc" : "2.0", "error" : {"code": 103, "message": "Failed to open input stream."}, "id" : "id"}'); $fileinfo=pathinfo($_FILES['file']['name']); $fileExt=$fileinfo['extension']; if (!in_array($fileExt,array('jpg','jpeg','png','gif'),TRUE)) exit('{"jsonrpc" : "2.0", "error" : {"code": 103, "message": "Refused to upload file."}, "id" : "id"}'); $fileName=DIR.md5_file($_FILES['file']['tmp_name']).'.'.$fileExt; //上传到SAE的Storage $storage=new SaeStorage(); $result=$storage->upload(DOMAIN,$fileName,$_FILES['file']['tmp_name']); //处理错误 if (!$result) { sae_debug('Fail to Upload to Storage'); echo '{"jsonrpc" : "2.0", "error" : {"code": 102, "message": "Failed to open output stream."}, "id" : "id"}'; exit; } echo '{"jsonrpc" : "2.0", "result" : null, "id" : "id"}'; ?>
当然。文件名什么的你都可以随便取,只要知道用$_FILES取得上传的文件就行了
本文转载自泷涯零点
915099 416382I recognize there is a superb deal of spam on this internet site. Do you require aid cleaning them up? I could support in between courses! 813574
2018年8月19日 08:29你的完整模版很漂亮,可以交换链接吗?本人可以付费喔!
2016年2月25日 12:58啥连接?
2016年3月27日 17:14这个貌似看上去技术很高端,拜读了!
2015年1月14日 15:20看看友友欢迎回访。。。
2015年1月13日 20:25笑纳了。。。
2015年1月13日 09:39