Methods for uploading multiple files and limiting files in SWFUpload

This article describes the method of uploading multiple files and limiting the number of files in SWFUpload. Share it for your reference, as follows:

SWFUpload is a client file upload component based on flash and JavaScript.

handlers.js file

Complete file queueing (fileQueued) →

Complete the selection of file (fileDialogComplete) → Start uploading (uploadStart) → Upload processing (uploadProgress) → Upload Success (uploadSuccess) → Upload completion (uploadComplete) →

queueComplete

As shown above, if the above callback functions are executed in sequence by single-select files, it should be noted that multiple files are selected. FileQueued and queueComplete will only be executed once, while fileDialogComplet...→ uploadComplete will be executed once per file.

After completing the basic functions with reference to the official example, Imitation Ganji adopts an iframe method.

In order to achieve the limit on the number of thumbnail preview and the number of pictures deleted and uploaded

Display thumbnails, generate buttons to delete thumbnails,

thumbImages displays divs of thumbnails for parent page

src_s is the generated thumbnail address

src_b is the original image address

serverData is the data returned by the image upload processing page. It will be returned in the format of success|thumbnail address|original address|original address

 function uploadSuccess(file, serverData) { try { var result = serverData.split('|'); if(result[0] != 'success') { var progress = new FileProgress(file, this.customSettings.progressTarget); progress.setError(); progress.setStatus(serverData); progress.toggleCancel(false); } else { var progress = new FileProgress(file, this.customSettings.progressTarget); progress.setComplete(); progress.setStatus("Upload Complete"); progress.toggleCancel(false); var img_url_s = result[1]; var img_url_b = result[2]; addImage(img_url_s,img_url_b); } } catch (ex) { this.debug(ex); }}

 function addImage(src_s,src_b) { var newDiv = parent.document.createElement("div"); newDiv.style.margin = "5px"; newDiv.style.height = "60px"; newDiv.style.width = "80px"; newDiv.style.border = "1px solid #7F9DB9"; newDiv.style.cssFloat = "left"; newDiv.style.styleFloat = "left"; newDiv.style.position = "relative"; var newA = parent.document.createElement("a"); newA.className = "delete"; newA.title = "delete"; newA.href = "javascript::"; newA.onclick = function(){delDiv(newDiv);}; var newInput_s = parent.document.createElement("input"); newInput_s.type = "hidden"; newInput_s.value = src_s; newInput_s.name = "image_s[]"; newA.appendChild(newInput_s); var newInput_b = parent.document.createElement("input"); newInput_b.type = "hidden"; newInput_b.value = src_b; newInput_b.name = "image_b[]"; newA.appendChild(newInput_b); var newImgDiv = parent.document.createElement("div"); var newImg = parent.document.createElement("img"); newImg.style.height = "60px"; newImg.style.width = "80px"; newImgDiv.appendChild(newImg); newDiv.appendChild(newImgDiv); newDiv.appendChild(newA); parent.document.getElementById("thumbImages").appendChild(newDiv); if (newImg.filters) { try { newImg.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0; } catch (e) { // If it is not set initially, the browser will throw an error. This will set it if it is not set yet. newImg.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')'; } } else { newImg.style.opacity = 0; } newImg.onload = function () { fadeIn(newImg, 0); }; newImg.src = src_s;}function fadeIn(element, opacity) { var reduceOpacityBy = 5; var rate = 30; // 15 fps if (opacity < 100) { opacity += reduceOpacityBy; if (opacity > 100) { opacity = 100; } if (element.filters) { try { element.filters.item("DXImageTransform.Microsoft.Alpha").opacity = opacity; } catch (e) { // If it is not set initially, the browser will throw an error. This will set it if it is not set yet. element.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')'; } } else { element.style.opacity = opacity / 100; } } if (opacity < 100) { setTimeout(function () { fadeIn(element, opacity); }, rate); }}

Regarding the processing of the remaining number of uploaded files

 function queueComplete(numFilesUploaded) { this.setButtonDisabled(false); var stats = this.getStats(); var status = document.getElementById("divStatus"); status.innerHTML = "uploaded" + stats.successful_uploads + " files, you can also upload" + parseInt(this.settings['file_upload_limit']-stats.successful_uploads) + " files";}function delDiv(mydiv) { mydiv.parentNode.removeChild(mydiv); //Swfu see swfu in the iframe page swfu = new SWFUpload(settings); var stats = swfu.getStats(); stats.successful_uploads--; swfu.setStats(stats); var status = document.getElementById("divStatus"); status.innerHTML = "uploaded" + stats.successful_uploads + "A file, can also be uploaded" + parseInt(swfu.settings['file_upload_limit']-stats.successful_uploads) +"files";}

It may be due to the use of iframe

Swfu in delDiv function cannot be replaced by this

The overall effect is as shown in the figure:

After uploading the picture and modifying the information again, you need to get how many pictures have been uploaded and combine them into swfupload

Get the uploaded image path from the background through php, and give it to a js array through smarty

 var img_arr = new Array();{if isset($img_arr)}{section name='img_arr' loop=$img_arr}img_arr[{$smarty.section.img_arr.index}] = new Array('{$img_arr[img_arr].images_s}','{$img_arr[img_arr].images_b}');{/section}{/if}

Query the swfupload document to get the following information

flashReady()

This event function is an internal event and cannot be rewritten. This event is triggered when the SWFupload is instantiated and the loaded FLASH completes all initialization operations.

Reminder: Swfupload_loaded_handler in the corresponding settings

So set swfupload_loaded_handler in swfupload settings

swfupload_loaded_handler : loaded,

Then define the loaded function in handlers.js

 function loaded() { if(img_arr.length != 0) { for( val in img_arr ) { addImageFromDb(img_arr[val][0],img_arr[val][1],this); } }}

Call the addImageFromDb function to modify the number of uploaded images and generate thumbnails of uploaded images

 //Initialize the uploaded image function addImageFromDb(src_s,src_b,swfu) { var stats = swfu.getStats(); stats.successful_uploads++; swfu.setStats(stats); var status = document.getElementById("divStatus"); status.innerHTML = "Uploaded<font color='green'>" + stats.successful_uploads + "</font> Zhang, you can also upload<font color='red'>"+ parseInt(swfu.settings['file_upload_limit']-stats.successful_uploads) +"</font>Zhang"; addImage(src_s,src_b);}

For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of JavaScript traversal algorithms and techniques", and "Summary of JavaScript mathematical operations usage"

I hope this article will be helpful to everyone's JavaScript programming.