Plupload+artdialog to realize multi-platform upload file _javascript skills

Before the introduction of the text to introduce you to the next plupload knowledge

Plupload Introduction

Plupload is developed by a TINYMCE developer and provides a highly available upload plugin for your content management system or similar uploading programs. Plupload is currently divided into a core API and a jquery upload queue widget so that you can use it directly or customize it yourself.

Plupload characteristics

Plupload uses the jquery component as a queue component for selecting files and uploading files.

Plupload use Flash,silverlight,html5,gears,browserplus, fileupload upload file technology engine.

Plupload allows customization to use the Plupload core API to select files and upload files.

JavaScript is used to activate the File selection dialog box. This File selection dialog box can be set to allow the user to select a separate file or multiple files. The selected file type can also be restricted, so the user can only select the appropriate file specified, such as Jgp;gif.

Plupload allows you to customize some of the events in the upload process and write your own approach.

The selected file is uploaded and it is on the page, the form is independent. Each file is uploaded separately, which ensures that the server-side script can process a single file more easily at one point in time. Specific information can be accessed Plupload official website: http://www.plupload.com/

Background: The original project used in the front-end file upload control is uploadify, all the peaceful after a period of time. "Good news" came from the scene, customers want to use the ipad system, but also want to upload pictures. Customer Master a Pat forehead, research and development will be overtime. You know uploadify is dependent on flash, so it's not on the IOS,MAC system. So, after a Google, found the plupload. It's easier to start with.

Page HTML code:

The head tag contains the necessary JS files

<script type= "Text/javascript" src= "Js/jquery-1.9.1.min.js" ></script>
<!--Art Dialog-->
<script type= "Text/javascript" src= "Artdialog/artdialog.source.js?skin=blue" ></script>
<!--plupload-->
<script type= "Text/javascript" src= "Plupload/plupload.full.js" ></script>

Page elements in the body tag

<!--trigger pop-up-->
<a id= "uploadbtn" class= "optionbtn inline" href= "#" > File upload </a>
<div id= " Uploadcontent "class=" "style=" Display:none;height:300px;overflow-x:hidden;overflow-y:auto; >
<div id= "Choosefile" >
<span> Single file support less than 100m</span><br/>
<a id= " Uploadify "href=" javascript:void (0); " > select Documents </a>
</div> 
<div id= "Uploadfilequeue" style= border:1px solid #a7c5e2; width:350px; " >
</div>
</div><pre id= "Console" ></pre>

Code in the script label

var Globaluploader; function _plupload () {var uploader = new Plupload. Uploader ({runtimes: ' Html5,flash,silverlight,html4 ', Browse_button: ' Uploadify ', the id attribute of the DOM object browsing the file on the page container: ' Uploadcontent ',//contains Browse_button div URL: '/uploadaction!localupload.action ',//Receive File Upload action Flash_swf_url: '/ Folder/js/plupload/moxie.swf ', Silverlight_xap_url: '/folder/js/plupload/moxie.xap ', filters: {max_file_size: ' 100MB ',//limit upload file size mime_types: [//Limit upload file type {title: ' Image Files ', extensions: ' Jpg,gif,png '}]}, init: {postinit:funct Ion () {$ (' #uploadfileQueue '). html (');}, Uploadfile:function (up,file) {//beforeupload triggered}, Beforeupload:function ( Up,file) {//Click the button to upload before the trigger, here you can do the query with the same name file, check the remaining space and other operations//check whether there is a duplicate file, there is directly at the end of the filename with parentheses and numbers to differentiate $.ajax ({URL: "/folder/personal/ Personalaction!getnewfilename.action ", type:" POST ", Async:false, data:{' upfilename ': file.name, ' globalpid ': Globalpid}, DataType: "JSON", success:function (data) {//Before uploading parameters up.setoption (' Multipart_params ', {upfilename: Data.newfilenAme, UpFileType:file.name.split (".") [File.name.split (".").
length-1],//suffix upFileSize:file.size, parentid:globalpid}); }, Error:function (XMLHttpRequest, Textstatus, Errorthrown) {Messagealert ("Sorry, file [" +file.name+ "] upload prepare Failed", "");//$ (' #
Uploadify '). Uploadify (' Cancel ', file.id);//Cancel an upload task by ID}});
}, Filefiltered:function (up, file) {//Select files triggered}, filesadded:function (up, files) {//files added to queue var i = 0;//Record file list number, delete with Plupload.each (files, function (file) {$ (' #uploadfileQueue '). HTML ($ (' #uploadfileQueue '). HTML ( ) + ' <div id= ' + file.id + ' "class=" Uploadify-queue-item "><div class=" Cancel "><a href=" Javascript:_plup Load_removefile (' +i+ ', ' +file.id+ ') "></a></div><span class=" FileName "> ' + file.name + ' (' + Plupload.formatsize (file.size) + ') </span><b></b><div class= "Uploadify-progress" ><div
class= "Uploadify-progress-bar" ></div></div></div> ");
i + +;
}); }, Uploadprogress:function (UP, File) {//Click Start upload to trigger, here you can add progress bar, using File.percent document.getElementById (file.id). getElementsByTagName (' b ') [0]. InnerHTML = ' <span>-' + file.percent + '%</span> ';%//% (' # ' + file.id). Find ('. Uploadify-progress-bar '). CSS (' width ', file.percent + '% '),//Progress bar}, error:function (up, err) {//Error triggering document.getElementById (' console '). InnerHTML + = "\ n Error #" + Err.code + ":" + Err.message}, fileuploaded:function (up, file, info) {//one file upload complete trigger//Fires when a file I
S successfully uploaded. data = eval ("(" + Info.response +) ");//server returns, where you can modify the list of files on the page, etc.}, uploadcomplete:function (up, files) {//All files uploaded after the trigger//f
Ires when all files in a queue are uploaded.
}
}
});
Uploader.init ();
Globaluploader = uploader; function Popupdialog () {Artdialog ({id: ' file-upload ', title: ' File Upload ', fixed:true, Lock:true, Content: $ ("#uploadConten
T ") [0], button:[{name: ' Start uploading ', Focus:true, Callback:function () {Globaluploader.start (); return false;}},{name: ' Close ', Callback:function () {$ (' #uploadfileQueue '). HTML ('); Delete the contents of the upload queue globalUploader.files.splice (0,globaluploader.files.length);//clear the contents of the upload queue return true; }}, Close:function () {$ (' #uploadfileQueue '). html (');//Delete the contents of the upload queue GlobalUploader.files.splice (0,
GLOBALUPLOADER.FILES.LENGTH);//clear the contents of the upload queue}}); } $ (function () {$ (' #uploadBtn '). Click (function () {Popupdialog ();}); _plupload ();});

The background code does not write, I use the STRUTS2 background action to use private file file to receive files, change other name is NULL, currently do not know how to set this value in the control

And that's the way it works.

Want the progress bar to add these CSS styles, is already control

<style type= "Text/css" >
#uploadfileQueue {
position:relative;
left:0;
top:0;
border:1px solid #a7c5e2;
margin-bottom:5px;
height:228px;
width:350px;
Overflow-x: Hidden;
Overflow-y: auto;
Uploadify-queue-item {/
* Background-color: #F5F5F5; * *
background-color: #FFF;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
font:11px Verdana, Geneva, Sans-serif;
/* MARGIN-TOP:5PX; * *
margin:5px 5px 5px 5px;
max-width:350px;
padding:10px
}
. uploadify-progress {
background-color: #E5E5E5;
margin-top:10px;
width:100%
}
. Uploadify-progress-bar {
background-color: #0099FF;
height:3px;
width:1px;
}
</style>

The final effect. What, and want uploadify to delete the fork of the file in the queue, okay?

Add this paragraph in style.

. Uploadify-queue-item. Cancel a {
background:url (' js/uploadify-cancel.png ') 0 0 no-repeat;
Float:right;
height:16px;
Text-indent: -9999px;
width:16px;
}

Of course, also have to add the JS code deleted. The official API here is removefile (file) but it doesn't work very well here. So another method is used splice (num,length), NUM is deleted from the first few, length is the number of deletes.

function _plupload_removefile (removenum,fileid) {
globalUploader.files.splice (removenum,1);//Delete part of the file
$ ( Fileid). fadeout ();

Final effect.

The above is a small set to introduce the Plupload+artdialog to achieve multiple platform upload file, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!