使用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 相关文章推荐
js输出列表实现代码
Sep 12 Javascript
JavaScript Date对象 日期获取函数
Dec 19 Javascript
javascript 闭包
Sep 15 Javascript
JS命名空间的另一种实现
Aug 09 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
纯JS实现简单的日历
Jun 26 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 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
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
php下实现伪 url 的超简单方法[转]
2007/09/24 PHP
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
[00:33]2016完美“圣”典风云人物:Sccc宣传片
2016/12/03 DOTA
python测试mysql写入性能完整实例
2018/01/18 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
《盘古开天地》教学反思
2014/02/28 职场文书
党员承诺书内容
2014/03/26 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
运动会报道稿大全
2015/07/23 职场文书
干部考核工作总结
2015/08/12 职场文书