使用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 相关文章推荐
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
jquery中通过父级查找进行定位示例
Jun 28 Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 Javascript
jQuery实现切换页面过渡动画效果
Oct 29 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
Oct 27 Javascript
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 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
ftp类(myftp.php)
2006/10/09 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
PHP图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
jQuery获取浏览器类型和版本号的方法
2016/07/05 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
vue中axios请求的封装实例代码
2019/03/23 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
Python中的ceil()方法使用教程
2015/05/14 Python
Python 闭包的使用方法
2017/09/07 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
Python try except finally资源回收的实现
2021/01/25 Python
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
三维科技面试题
2013/07/27 面试题
酒店仓管员岗位职责
2014/04/28 职场文书
灵魂歌王观后感
2015/06/17 职场文书
python之基数排序的实现
2021/07/26 Python