使用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 相关文章推荐
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
一些常用且实用的原生JavaScript函数
Sep 08 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
Apr 14 Javascript
JQuery切换显示的效果实例代码
Feb 27 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
详解JS函数重载
Dec 04 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
通过js随机函数Math.random实现乱序
May 19 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
《PHP编程最快明白》第三讲:php数组
2010/11/01 PHP
php中的boolean(布尔)类型详解
2013/10/28 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
JQuery 小练习(实例代码)
2009/08/07 Javascript
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
JS实现页面打印(整体、局部)
2017/08/18 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
python中管道用法入门实例
2015/06/04 Python
基于python 字符编码的理解
2017/09/02 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
中国旅游网站:途牛旅游网
2019/09/29 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
经典c++面试题四
2015/05/14 面试题
单位接收函范文
2015/01/30 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers