Home > Developer > JavaScript
Using Plupload to directly upload attachments to qiniu cloud storage, plupload Niu cloud
Which users are the main targets of this plug-in?
1. users who want to download servers in a small space do not have enough bandwidth or space. How can we solve this problem? Make our website an intermediate layer, and then upload the content to the server to qiniu cloud storage. The download is equivalent to the download of qiniu, which saves both space and bandwidth, solved the possibility that a small space cannot be used as a download site!
2. my server is very good, but sometimes users only upload a few K faster, there is no lack of ISP limit to 64 KB, but not a few K, this actually exists, we also use this as the upload server, and then use the software to regularly download to the server. This is what a website owner currently does.
3. Create a document library for others to upload to my cloud Space
Such
With regard to this plug-in, JS has to say that the Plupload plug-in is really powerful, and there is a problem with its power. It is complicated. What is complicated? It can be customized, you can implement the desired function by yourself. If you only talk about this plug-in, it will be too difficult. You can refer to the official API. Here I am just doing a seven-way demo, you can take a look at uploadify in the front!
Index. php
Copy codeThe Code is as follows:
<? Php
Require_once ("./qiniu/io. php ");
Require_once ("./qiniu/rs. php ");
Require_once ("./qiniu/fop. php ");
$ Bucket = "space name ";
$ 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 <Div id = "uploader">
<P> Your browser doesn't have Flash, Silverlight or HTML5 support. </p>
</Div>
<Script type = "text/javascript">
$ (Function (){
$ ("# Uploader"). pluploadQueue ({
// Set the type
Runtimes: 'html5, flash, silverlight ',
// Set the upload url
Url: 'http: // up.qiniu.com /',
Multipart: true,
// Set the token for post to seven cows
Multipart_params :{
'Token': '<? Php echo $ upToken;?> ',
},
Resize: {width: 800, height: 600, quality: 60}, // set the size.
// Modify the post field to the file of qiniu.
File_data_name: 'file ',
// Set some restrictions
Filters :{
// Set the size
Max_file_size: '10mb ',
// Supported upload types
Mime_types :[
{Title: "Image files", extensions: "png, jpeg "},
{Title: "RAR files", extensions: "rar,zip,tar.gz "}
]
},
// Set the Flash path
Flash_swf_url: './js/Moxie.swf ',
// Set the Silverlight path
Silverlight_xap_url: './js/Moxie. xap ',
// Multifile upload. If you upload multiple files, you can remove the comments here.
// Preinit :{
// UploadFile: function (up, file ){
// Up. settings. multipart_params.key = file. name;
//}
//},
});
Var uploader = $ ('# uploader'). pluploadQueue (); // get the upload queue
// Bind the FIlesAdded method. For details, refer to the official API single file upload method.
Uploader. bind ('filesadded', function (up, files ){
// Obtain the file name. This is a single object. If multiple objects need to be uploaded cyclically
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 (random, 99999);?> "+". "+ Type;
});
If (uploader. files. length> 0) {// indicates that if there are files in the upload queue
Uploader. start ();
} Else {
Alert ('you must select a file .');
}
});
</Script>
</Body>
</Html>
Qiniu's product is really good. You can refer to my previous articles, including the server backup (LINUX) and uploadify plug-ins. This JS plug-in is relatively simple, if you have any questions, even if you ask me
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
