Before introducing the main text, let me introduce the knowledge of plupload.
Introduction to plupload
Plupload is developed by developers of TinyMCE, providing 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, which allows you to use it directly or customize it yourself.
Plupload feature
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 files technology engines.
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 users 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 customization of some events during the upload process and write its own processing method.
The upload of the selected file is independent of the page and form where it is located. Each file is uploaded separately, which ensures that the server-side script can handle a single file more easily at a point in time. For specific information, please visit the official website of Plupload: http://www.plupload.com/
Background: The front-end file upload control used in the project was uploadify, and everything was peaceful for a while. "Good news" came from the scene, and the customer wanted to use the iPad system and wanted to upload pictures. The customer master slapped his forehead and had to work overtime on R&D. As you all know, uploadify depends on flash, so it is not possible on iOS and Mac systems. So, after some google, I found the plupload. It's easier to get started.
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 body tag
<!-- Trigger the pop-up box--><a id="uploadBtn" href="#">File upload</a><div id="uploadContent" style="display:none;height:300px;overflow-x:hidden;overflow-y:auto;"><div id="choosefile"><span>Single file supports less than 100M</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></div><pre id="console"></pre>
Code in script tag
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 contains: 'uploadContent',//The divurl containing browser_button: '/uploadAction!localUpload.action',//Receive actionflash_swf_url uploaded by file: '/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: function() {$('#uploadfileQueue').html('');},UploadFile : function(up,file){//Frequently triggered after BeforeUpload},BeforeUpload: function(up,file){//Frequently before uploading after clicking the button. Here you can query the file with the same name, check the remaining space, etc. //Check whether there is a duplicate file. If you have a parentheses and numbers at the end of the file name to distinguish $.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.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 to upload",'');// $('#uploadify').uploadify('cancel',file.id);//Cancel a upload task by pressing id}});},href="javascript:_plupload_removeFile('+i+','+file.id+')"></a></div><span>' + file.name + ' (' + plupload.formatSize(file.size) + ')</span><b></b><div><div></div></div></div></div>');i ++;});},UploadProgress: function(up, file) {//Click to start uploading and trigger it. Here you can add a progress bar, using file.percentdocument.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>-' + file.percent + "%</span>";//Percent $('#' + file.id).find('.uploadify-progress-bar').css('width', file.percent + '%');//Progress bar},Error: function(up, err) {//Error trigger document.getElementById('console').innerHTML += "/nError#" + err.code + ": " + err.message;},FileUploaded: function(up, file, info) {//Trigger after uploading// 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, etc.}, UploadComplete: function(up, files){//All files are triggered after uploading//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();});I won't write the background code. I used the struts2 backend action to receive the file received by using private File file. Change the other name to null. I don't know how to set this value in the control yet.
Then this is the effect
If you want to add these css styles to the progress bar, you have 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;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, I also want to uploadify to delete the file in the queue fork, OK
Add this 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, you also need to add deleted js code. There is removeFile(file) in the official API here, but it is not easy to use here. So another method is used to split(num, length), num is deleted from the first, 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 is the plupload+artdialog introduced to you by the editor to achieve multi-platform upload files. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!