使用Plupload实现直接上传附件至七牛云存储


Posted in Javascript onDecember 26, 2014

这个插件主要针对哪些用户?

1.空间小想做下载服务器的用户,既没有足够的带宽,又没有足够大的空间,我们这个怎么弄呢?将我们的网站做成中间层,然后用户上传到服务器其实就上传到了七牛云存储,下载也是等同于在七牛下载,即省了空间又省了带宽,解决了小空间不能做下载站的可能!

2.我本身服务器很好,但是有时候用户上传只有几K的速度往上走,这个不乏有ISP的限制成64KB,但是达不到就几K,这个真实存在的,我们也用这个做上传服务器,然后用软件定时下载到服务器,这个就是现在一个网站主现在做的

3.做一个个人的文档库,让别人都上传到我的云空间中

就如下图的实例

使用Plupload实现直接上传附件至七牛云存储

关于这个插件,JS中不得不说Plupload这个插件真的很强大,强大就有一个问题,复杂,什么叫复杂就是可定制化,自己动手丰衣足食,想要的功能你可以自己实现,如果只讲这个插件那就太费劲了,大家可以参考官方的API,我这里只是做一个七牛的demo,前边有uploadify的大家可以一起看看!

index.php

<?php

 require_once("./qiniu/io.php");

 require_once("./qiniu/rs.php");

 require_once("./qiniu/fop.php");

 $bucket = "空间名称";

 $accessKey = 'APIKEY';

 $secretKey = 'APIKEY';

 Qiniu_SetKeys($accessKey, $secretKey);

 $putPolicy = new Qiniu_RS_PutPolicy($bucket);

 $upToken = $putPolicy->Token(null);

?>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<title>Plupload for QINIU</title>

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

<link rel="stylesheet" href="./js/jquery.plupload.queue/css/jquery.plupload.queue.css" type="text/css" />

<script type="text/javascript" src="./js/plupload.full.min.js"></script>

<script type="text/javascript" src="./js/jquery.ui.plupload/jquery.ui.plupload.js"></script>

<script type="text/javascript" src="./js/jquery.plupload.queue/jquery.plupload.queue.js"></script>

</head>

<body style="font: 13px Verdana; background: #eee; color: #333">

<h1>Plupload to QINIU Example</h1>

<div id="uploader">

    <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>

</div>

<script type="text/javascript">

$(function() {

 $("#uploader").pluploadQueue({

  //设置类型

  runtimes : 'html5,flash,silverlight',

  //设置上传的url

  url : 'http://up.qiniu.com/',

  

  multipart: true,

  //设置post传给七牛的token

  multipart_params: {

   'token': '<?php echo $upToken; ?>', 

  },

  

  resize : {width : 800, height : 600, quality : 60},  // 设置大小

  //修改post字段为七牛的file

  file_data_name: 'file',

  //设置一些限制

  filters : {

   // 设置大小

   max_file_size : '10mb',

   // 允许上传的类型

   mime_types: [

    {title : "Image files", extensions : "png,jpeg"},

    {title : "RAR files", extensions : "rar,zip,tar.gz"}

   ]

  },

  // 设置Flash的路径

  flash_swf_url : './js/Moxie.swf',

  // 设置Silverlight的路径

  silverlight_xap_url : './js/Moxie.xap',

  //多文件上传 如果你是多文件上传可以把这里的注释去掉

  // preinit :{

  //  UploadFile : function(up,file){

    //          up.settings.multipart_params.key=file.name;

  //  }

  // },

 

 });

     var uploader = $('#uploader').pluploadQueue();  // 取得上传队列

           //绑定FIlesAdded这个方法 具体的好多方法大家可以看官方的API 单一文件上传的方法

           uploader.bind('FilesAdded',function(up,files){

             //获取文件名称 这个是单一的 如果多文件需要循环上传

               var filename = files[0].name;

               var filedata = filename.split(".");

               var type   = filedata[filedata.length-1];

               up.settings.multipart_params.key="<?php echo date('Ymd-His') . '-' . rand(10000,99999);?>"+"."+type;

             });

     if (uploader.files.length > 0) {  // 就是说如果上传队列中还有文件 

              uploader.start();  

          } else {  

              alert('你必须选择一个文件.');  

          }  

});

</script>

</body>

</html>

七牛的产品真的还是不错的,大家可以借鉴我前边的文章,有服务器备份的(LINUX)还有uploadify这个插件的,相对来说这个JS插件简单话,当然里边还有七牛的查询代码,如果大家有什么疑问尽管问我

Javascript 相关文章推荐
jquery text,radio,checkbox,select操作实现代码
Jul 09 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
Jan 21 Javascript
对JavaScript中this指针的新理解分享
Jan 31 Javascript
JQuery工具函数汇总
Jun 15 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
node.js实现登录注册页面
Apr 08 Javascript
javaScript字符串工具类StringUtils详解
Dec 08 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
React事件处理的机制及原理
Dec 03 Javascript
js实现鼠标点击飘爱心效果
Aug 19 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 #Javascript
jQuery中ajax的load()方法用法实例
Dec 26 #Javascript
jquery中checkbox全选失效的解决方法
Dec 26 #Javascript
jQuery中change事件用法实例
Dec 26 #Javascript
jQuery中mouseover事件用法实例
Dec 26 #Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 #Javascript
Angularjs 基础入门
Dec 26 #Javascript
You might like
php函数与传递参数实例分析
2014/11/15 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
基于jquery的表头固定的若干方法
2011/01/27 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
微信小程序订阅消息(java后端实现)开发
2020/06/01 Javascript
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
Python 实现两个列表里元素对应相乘的方法
2018/11/14 Python
python实现狄克斯特拉算法
2019/01/17 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
解决Python对齐文本字符串问题
2019/08/28 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
Python读写压缩文件的方法
2020/07/30 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
python简单实现9宫格图片实例
2020/09/03 Python
CSS3.0实现霓虹灯按钮动画特效的示例代码
2021/01/12 HTML / CSS
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
工程监理应届生求职信
2013/11/09 职场文书
社区交通安全实施方案
2014/03/22 职场文书
应届毕业生自荐信
2014/05/28 职场文书
大型演出策划方案
2014/05/28 职场文书
运动会100米加油稿
2015/07/21 职场文书