Manage Fileupload with Javascript

[Zebaril]

Everybody knows this problem with the fileupload which you can always upload a limited number of files or the user must first set the number of files to be uploaded. For me it was now your presence a fileupload Manager simulate the new files you can add or delete. The whole thing is user friendly set up so that you constantly add new files or remove already "uploaded" files again. The trick of the whole thing is, once the user clicks on the button will addField the current input file and creates a new box, hidden input file box. At the same time an ad is created which indicates that the uploaded files as well as a 'delete', the ad should make sure that after the input box is properly removed.

[MindSpace]

The event handler can sort out your issue in this. I had created a demo service on my site to upload files by the users. I had tried the same by allowing a bunch of users to upload files at a single time. The sample code which I used in my site is posted below. So you can have a look for the below code and get a idea about the function.

* Auxiliary function for event handling 
* @ Access public 
* @ Param object element, which triggers the Event Object 
* @ Param string type, which comes into question EventHandler 
* @ Param string callBack, callBack function that handles the event 
* @ Param object returnParams optional return parameter 
* @ Return object event; 
Html object * @ return object; 
* / 
event handling function (element, type, callBack, returnParams) ( 
    / * 
     * Set event handler 
     * / 
     var returnParams = returnParams; 

     if (document.addEventListener) (/ / good browsers 
        if (type.match (/ ^ on /)) type = type.replace (/ ^ on /,""); 
element.addEventListener (type, handleEvent, false); 
     ) Else (/ / IE 
         if (! type.match (/ ^ on /)) type = "on" + type; 
         element.attachEvent (type, handleEvent); 
     ) 

     function handleEvent (evt) ( 
         var event = | | evt window.event; 
         var target = evt.srcElement | | evt.currentTarget; 

         callBack.call (callBack, event, target, (returnParams)? returnParams: null); 
     ) 
)

[Modifier]

setEvent register the events which will be available from the outset by means of the auxiliary function event handling for the items the first one is add for addFile (new files), filefield the current input field (about which one reads the input) and upload (upload files to be final on the server). The code for the same is listed below.

setEvent function () ( 
     event handling (document.getElementById ( "addFile"), "click", uploadFile); 
     event handling (document.getElementById ( "filefield"), "change", LastFile); 
     event handling (document.getElementById ( "upload"), "click", removeUploadField); 
) 

[Katty]

LastFile is a callback function when the onchange event has occurred on the current fileupload field, this ensures that the last file that was saved selected is precisely in the variable lastselectedFile. All INPUT HTML tag stores. The referred syntax for the same is - function LastFile (evtObject, curTarget) ( lastselectedFile = curTarget; ). Then uploadFile is the core of the whole. uploadFile is the callback function for the event handler on the HTML element addFile. First, the input field is just what the file was hidden and selected a new ID assigned. Next you can create a new input box, which now the user can now register the new file upload. The new input tag is replaced by a new field name + the number of current uploaded files so that this is unique and no other fields in the $ _FILES array overrides later. The new input file box will now upload field stored in the buffer or variable that will be needed later if we want to save all the files completely au the server.