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

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

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

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

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

就如下图的实例

关于这个插件，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="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://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插件简单话，当然里边还有七牛的查询代码，如果大家有什么疑问尽管问我

赞 (0)

相关推荐

  • 使用plupload自定义参数实现多文件上传

    使用plupload自定义参数实现多文件上传

    1.在开发中可能需要用户附件上传的功能,实现批量上传功能其实就将多个上传任务放到一个集合中,分别上传. 2,使用plupload js插件可以很轻松的实现带参数的多文件上传 3.具体js实现方式 <script type="text/javascript"> var map={};//文件id为key,文件类型为value的集合 // Custom example logic var uploader = new plupload.Uploader({ runtimes :

  • SSM框架+Plupload实现分块上传大文件示例

    SSM框架+Plupload实现分块上传大文件示例

    关于Plupload的介绍,相信它的官网http://www.plupload.com/已经给得很详细了.Plupload的上传原理简单点说,就是将用户选中的文件(可多个)分隔成一个个小块,依次向服务器上传,这是它能驾驭上传大文件的原因之一,而且在这个过程可以暂停上传,暂停后再继续上传(异于断点续传).最重要的是,从头到尾没有一点点UI阻塞,保证了用户体验.下面会开始讲Plupload的实现流程,分析原理,并在最后给出效果图. 在此之前先说说我的项目,做的j2ee项目运用到spring+Spri

  • artDialog+plupload实现多文件上传

    artDialog+plupload实现多文件上传

    Plupload简介 Plupload是有TinyMCE的开发者开发的,为您的内容管理系统或是类似上传程序提供一个高度可用的上传插件.Plupload 目前分为一个核心API 和一个jQuery上传队列部件,这样使你可以直接使用或是自己定制. 一.效果展示 包括文件上传面板以及文件上传列表 二.介绍 长话短说,采用spring springMVC mybatis maven mysql,实现多文件上传功能,下载使用的是流的形式. 其中涉及的分页我会另开一片博客介绍. 三.准备材料 pluploa

  • plupload+artdialog实现多平台上传文件

    plupload+artdialog实现多平台上传文件

    在没介绍正文之前先给大家介绍下plupload知识 plupload简介 Plupload是有TinyMCE的开发者开发的,为您的内容管理系统或是类似上传程序提供一个高度可用的上传插件.Plupload 目前分为一个核心API 和一个jQuery上传队列部件,这样使你可以直接使用或是自己定制. plupload特性 Plupload使用jQuery的组件做为选择文件和上传文件的队列组件. Plupload使用Flash,Silverlight,HTML5,Gears,BrowserPlus.Fi

  • 使用JS+plupload直接批量上传图片到又拍云

    论坛或者贴吧经常会需要分享很多图片,上传图片比较差的做法是上传到中央服务器上,中央服务器再转发给静态图片服务器.而这篇文章讲介绍如何使用plupload对上传过程进行优化,并绕过服务器直接批量上传图片到又拍云上的方法.本文集中会讲到以下几个重点: 复制代码 代码如下: plupload库 图片的本地压缩 多选图片 绕过服务器直接批量上传图片到又拍云 使用又拍的HTTP FORM API plupload的配置 plupload库 plupload是一个支持非常丰富的图片上传插件.可以对低版本的浏

  • yii2.0使用Plupload实现带缩放功能的多图上传

    本文讲解了plupload的相关代码,实现了ajax多图同时上传,然后将图片进行缩放,最后显示图片,分享给大家供大家参考,具体内容如下 1.文章视图中调用Plupload <?= \common\widgets\Plupload::widget([ 'model'=>$model, 'attribute'=>'cover_img', 'url'=>'/file/upload',//处理文件上传控制器 ])?> 2.\common\widgets\Plupload 组件 <

  • PHP + plupload.js实现多图上传并显示进度条加删除实例代码

    PHP + plupload.js JS插件实现多图上传并显示进度条加删除实例,废话不多说,直接上代码 HTML代码: <!DOCTYPE html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no&qu

  • JS插件plupload.js实现多图上传并显示进度条

    本文实例为大家分享了plupload.js多图上传的具体代码,供大家参考,具体内容如下 HTML代码: <!DOCTYPE html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

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

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

    这个插件主要针对哪些用户? 1.空间小想做下载服务器的用户,既没有足够的带宽,又没有足够大的空间,我们这个怎么弄呢?将我们的网站做成中间层,然后用户上传到服务器其实就上传到了七牛云存储,下载也是等同于在七牛下载,即省了空间又省了带宽,解决了小空间不能做下载站的可能! 2.我本身服务器很好,但是有时候用户上传只有几K的速度往上走,这个不乏有ISP的限制成64KB,但是达不到就几K,这个真实存在的,我们也用这个做上传服务器,然后用软件定时下载到服务器,这个就是现在一个网站主现在做的 3.做一个个人的

  • Django Admin 上传文件到七牛云的示例代码

    中文圈关于Django Admin 上传文件到七牛云的资料和函数库已经是2年前的了,国外的则都是关于AWS S3.Azure Storage一些国外的服务的.我根据Django的文档里提到的存储系统来实现上传文件到七牛云的简单功能. 在Django Admin的表单是根据数据模型生成的,其中文件上传由FileField和继承FileField的ImageField来决定的,文件上传到静态文件目录,数据库保存相对路径.实现上传文件到七牛云我们是根据FileField的storage参数来实现的.

  • element UI upload组件上传附件格式限制方法

    如下所示: <el-upload :action="uploadUrl" ref="upload" :multiple="false" :on-change="fileChange" :before-upload="beforeUpload" :on-success="handleAvatarSuccess" :on-preview="file_click" c

  • 使用jquery Ajax实现上传附件功能

    用过jquery的Ajax的人肯定都知道,Ajax的默认编码方式是"application/x-www-form-urlencoded",此编码方式只能编码文本类型的数据,因此Ajax发送请求的时候,会把data序列化成 一个个String类型的键值对,此种传输数据的方式能够满足大部分应用场景,然而当传输的数据里有附件的时候,此序列化机制便是我们的绊脚石.Ajax本身的序列化机制的硬伤归其原因在于在html4的时代,没有FileReader接口,在页面里无法读取File(Blob)文件

  • Vue2.0利用vue-resource上传文件到七牛的实例代码

    Vue2.0利用vue-resource上传文件到七牛的实例代码

    本文介绍了Vue2.0利用vue-resource上传文件到七牛,分享给大家,希望对大家有帮助 关于上传,总是有很多可以说道的. 16年底,公司项目番茄表单的前端部分,开始了从传统的jquery到vue 2.0的彻底重构.但是上传部分,无论是之前的传统版本,还是Vue新版本,都是在使用着FileAPI这款优秀的开源库,只是进行了简单的directive化.为什么呢?因为兼容性.没办法,公司项目不等同于个人项目,必须要考虑大多数浏览器.否则,上传部分完全可以利用Vue-Resource以及Form

  • NodeJS使用七牛云存储上传文件的方法

    1-准备工作 确认安装node和npm 安装 qiniu,formidable,express模块 npm install --save qiniu formidable [x] 导入模块 let qiniu = require('qiniu'), formidable = require('formidable'), express = require('express'), router = express.Router(); 2-服务器端的云存储操作 2-1文件上传 router.post

  • Python的Django中将文件上传至七牛云存储的代码分享

    最近在写的一个django小项目需要实现用户上传图片的功能,使用到了七牛云存储,特此记录下来.这里我使用的七牛python SDK 版本是7.0.3,函数使用上可能会与旧版有些不同. 原本文件上传需要先把文件上传到自己的业务服务器,再从业务服务器上传到云存储.现在七牛的表单上传可以直接把文件上传到七牛,不再需要业务服务器的中转,节省了流量成本,降低了业务服务器的压力.而且通过设置,还可以在文件上传完成后让客户端自动重定向到一个上传成功的结果页面.这里我就是使用了七牛的表单上传. 表单上传 用户上

  • Android中使用七牛云存储进行图片上传下载的实例代码

    Android中使用七牛云存储进行图片上传下载的实例代码

    Android开发中的图片存储本来就是比较耗时耗地的事情,而使用第三方的七牛云,便可以很好的解决这些后顾之忧,最近我也是在学习七牛的SDK,将使用过程在这记录下来,方便以后使用. 先说一下七牛云的存储原理,上面这幅图片是官方给出的原理图,表述当然比较清晰了. 可以看出,要进行图片上传的话可以分为五大步: 1. 客户端用户登录到APP的账号系统里面: 2. 客户端上传文件之前,需要向业务服务器申请七牛的上传凭证,这个凭证由业务服务器使用七牛提供的服务端SDK生成: 3. 客户端使用七牛提供的客户端

  • ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例

    本文实例讲述了ThinkPHP5+UEditor图片上传到阿里云对象存储OSS.分享给大家供大家参考,具体如下: ThinkPHP5使用富文本UEditor,将富文本编辑框内上传在本地的图片,修改到阿里云对象存储OSS ThinkPHP5加载UEditor ···· 略 UEditor下载:https://ueditor.baidu.com/website/download.html#ueditor (或本站下载:https://www.jb51.net/codes/56667.html) 阿里

随机推荐