Plupload + artdialog implements multi-platform file upload and pluploadartdialog

Plupload + artdialog implements multi-platform file upload and pluploadartdialog

Before introducing the text, I 'd like to introduce you to plupload.

Introduction to plupload

Plupload is developed by TinyMCE developers and provides a highly available upload plug-in for your content management system or similar upload programs. Plupload is currently divided into a core API and a jQuery upload Queue component, so that you can use it directly or customize it yourself.

Plupload features

Plupload uses jQuery components as the Queue component for selecting files and uploading files.

Plupload uses Flash, Silverlight, HTML5, Gears, BrowserPlus, and FileUpload to upload file technical engines.

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

JavaScript is used to activate the file selection dialog box. The Select File Dialog Box allows users to select a single file or multiple files. The selected file type can also be limited. Therefore, you can only select the specified file, such as jgp and gif.

Plupload allows you to customize some events during the upload process and write your own processing method.

The upload of the selected file is independent of its page and form. Each file is uploaded separately, which ensures that the server script can easily process a single file at a time point. For more information, visit the official Plupload Website: http://www.plupload.com/

Background: the front-end File Upload control used in the project is uploadify. After a while, everything went well. "Good news" came from the site. The customer wanted to use the ipad and upload images. Once the customer is familiar, R & D will have to work overtime. We know that uploadify depends on flash, so it won't work on ios or mac systems. Therefore, after some google operations, we found plupload. Easy to use.

Page html code:

The head tag contains 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 dialog box --> <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> a single file can be smaller than 100 MB </span> <br/> <a id =" uploadify "href =" javascript: void (0); "> select file </a> </div> <div id =" uploadfileQueue "style =" border: 1px solid # a7c5e2; height: 228px; width: 350px; "> </div> <pre id =" console "> </pre>

Code in the script tag

Var globalUploader; function _ plupload () {var uploader = new plupload. uploader ({runtimes: 'html5, flash, silverlight, html4', browse_button: 'uploadify ', // The id attribute container: 'uploadcontent' of the DOM object viewed on the page ', // divurl containing browse_button: '/uploadAction! LocalUpload. action ', // The actionflash_swf_url:'/folder/js/plupload/Moxie.swf ', silverlight_xap_url:'/folder/js/plupload/Moxie. xap ', filters: {restrict upload max_file_size: '100mb', // restrict the size of the uploaded file mime_types: [// restrict the upload file type {title: "Image files", extensions: "jpg, gif, png"}]}, init: {PostInit: function () upload('{uploadfilequeue'{.html ('') ;}, UploadFile: function (up, file) {// triggered after BeforeUpload}, BeforeUpload: function (up, f Ile) {// triggered before upload after clicking the button. You can query files of the same name and check the remaining space. // check whether duplicate files exist, if yes, add parentheses and numbers at the end of the file name to differentiate $. ajax ({url: "/folder/personal/personalAction! GetNewFileName. action ", type:" POST ", async: false, data: {'upfilename': file. name, 'globalpid ': globalPid}, dataType: "json", success: function (data) {// set the parameter up before uploading. 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 + "] failed upload Preparation", ''); // $ ('# uploadify '). uploadify ('cancel', file. id); // cancel an upload task by id }});}, when there are too many threads when using FileFiltered: function (up, file) {// triggered after selecting a file}, FilesAdded: function (up, files) {// Add the file to the queue var I = 0; // record the file list number, delete plupload. each (files, function (file) Upload ('{uploadfilequeue'{.html('{uploadfilequeue'{.html () + '<div id = "' + file. id + '"class =" uploadify-queue-item "> <div class =" cancel "> <a href =" javascript: _ plupload_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> '); I ++;}) ;}, UploadProgress: function (up, file) {// triggered after you click Start upload. You can add a progress bar here and use file. percentdocument. getElementById (file. id ). getElementsByTagName ('B') [0]. innerHTML = '<span>-' + file. percent + "% </span>"; // percentage $ ('#' + file.id).find('.uploadify-progress-bar').css ('width', file. percent + '%'); // progress bar}, Error: function (up, err) {// document triggered by an Error. getElementById ('console '). innerHTML + = "\ n Error #" + err. code + ":" + err. message;}, FileUploaded: function (up, file, info) {// triggered when a file is uploaded // Fires when a file is successfully uploaded. data = eval ("(" + info. response + ")"); // The data returned by the server. You can modify the file list on the page.}, UploadComplete: function (up, files) {// triggered when all files are uploaded // Fires 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: $ ("# uploadContent") [0], button: [{name: 'start upload', focus: true, callback: function () {globalUploader. start (); return false ;},{ name: 'close', callback: function({}('{uploadfilequeue'}.html (''); // Delete the content of the upload queue globalUploader. files. splice (0, globalUploader. files. length); // clear the content in the upload queue return true;}], close: function({{}('{uploadfilequeue'}.html (''); // Delete the content of the upload queue globalUploader. files. splice (0, globalUploader. files. length); // clear the content in the upload queue}) ;}$ (function () {$ ('# uploadBtn '). click (function () {popUpDialog () ;}); _ plupload ();});

The background code will not be written. I used the struts2 background action to use the private File file to receive the File, and changed the other name to null. Currently, I do not know how to set this value in the control.

Then the effect is like this.

You need to add these css styles to the progress bar, that is, existing 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 else do you want uploadify to delete files in the queue?

Add this section to the 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, you must add the deleted js Code. The official api contains removeFile (file). However, it is not easy to use it here. So another method splice (num, length) is used. num is deleted from the first few, and length is the number of deleted.

Function _ plupload_removeFile (removeNum, fileId) {globalUploader. files. splice (removeNum, 1); // delete some files $ (fileId). fadeOut ();}

Final effect.

The above section describes how to upload files on multiple platforms using plupload + artdialog. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!