Like using js/jq to load in the input file, the files are not for 1 time, but for a few?

In the course of writing the project has hit a problem, had long postponed the decision, but small inroads into the problem have not helped, and on a large-scale study of the time no, Slippers do not throw if something obvious is missed, better by a nose poke. The problem: There is input type file multiple, it screwed preview, which uses FileReader()->readAsDataURL();.
In fact, there is a problem - when I boot the computer we have in the preview of the picture appears, everything is OK again downloadable from a computer image - drawn preview, and then I get stuck: how to stick it to the array sent during server??? It seems the list is contained in fileList, but it seems only those files that came with the latest request from the computer? Any help would be appreciated, if you have questions - ask.
UPD: you can use an educated "NO" if there is no possibility then to hell with it, I'll be banging prevthe or bother with akaway download and remove excess if necessary, but this is an extreme option ((.
June 14th 19 at 18:27
2 answers
June 14th 19 at 18:29
Solution
JS cannot change <input type="file">this security constraint. The only normal option to send part - to read files from FileList and send via AJAX.

Unclear why all drive previews here and there, they can be locally generated.
https://jsfiddle.net/kj67cmuw/2/

A selection of typical cases of working with <input type="file">
https://developer.mozilla.org/en-US/docs/Using_fil...
no, not really explained, I guess thumbnails on the spot generated, the task is to collect all the files into a bunch with a few clicks on the file input and add them to the "memory" of the input, every time. As expected, faillist readonly, this is only a single array to send Ajax, this we know. But here the question - I loaded the picture show thumbs, the picture is in a separate array.
Bob 4 times uploaded different pictures, then clicked recognize submit the form I do preventDefault, loaded the pictures on the server, and then recognize submit the form to send the remaining data. And then a few questions -
firstly, as we understand it the server will have 2 unrelated events - the arrival of some of the pictures, and the arrival of data and in the data so I know more and latest uploaded pictures fall.
Well, let's say you can disable file input, thus solving one problem, still remains the question of the relationship between images and data. How to be?
To create a hidden data field of symbols? The server names are changing.
To create a common key for the pictures and for the fields? Not the fact that pictures are filled and processed faster than the second request, respectively, have then once they docked...
karoche more questions than answers. Pichalka. - lily.Kozey commented on June 14th 19 at 18:32
something that you want? - Austen.Thompson53 commented on June 14th 19 at 18:35
Yes , as an option, that is, create separate input every time when you click. only delete pictures one at a time, well here I am I'll be the perverted kind of villista to remove them, you have to be in writing?
Thank you. - lily.Kozey commented on June 14th 19 at 18:38
access to FileList - only readonly.
You can delete the entire input, or zero value to him.
Or you can send a form with some hidden fields marked which files are not needed (but they will still be loaded).
Or you can not submit the form and load the selected files via ajax. - Austen.Thompson53 commented on June 14th 19 at 18:41
hmm, a whole palette of options, and it's not super, but okay, thanks for that, will think... - lily.Kozey commented on June 14th 19 at 18:44
June 14th 19 at 18:31
Solution
So, the solution which eventually came on such parameters:
1) Files can be loaded in several stages, i.e., added, removed, added and so on.
2) Preview of files is stored in the browser, no download to submission of the main form to the server in order to prevent the dead download - when people close the form nedosypanija, but podgruzit files.
3) Files loaded on the server submit forms with lots of fields and linkouts with the object.

Implementation:
1) so as to write the owner was too lazy to pull with gichaba a half-hearted decision, and "after the Assembly of processed a file" (to whom interesting - write to put it somewhere or forco branch). What can this creation out of the box: load the files of pictures and do a preview with the delete button. All files are recorded in a separate array, which in the end push-button(optional immediately upon uploading with screws) Ajax sends it to the server files to generate a custom event when the download is complete. Something else, but other chips are not needed.
2) as a result of turning was added a few properties - the maximum number of files maximum file size maximum size for the whole set and the token. Now it is able to swear on the exceeding of limits and send not only files that are added to the array, but the key-token.
3) On main form was hanged the listener onsubmit which checked filesSended variable, by default set to false, and at the FALS did preventDefault form, Ajax had sent the files and the token on the service, after the download completes, fire the listener for the event of loading, which exhibited filesSended in labor, and again submiter basic form, without preventDefault. It looks like simple form submission with a reboot.
4) On the server the files are accepted into a write path and token, and then triggers the form handler on the server come the rest of the data and take the token from the hidden input. One of them is built the object aydishnik and the token is passed to the object images, the method ->relinkImages($id,$token); Method pulls all the pictures with the given token, change the link field to the desired ID, clears the token and saves the recording. All!
5) as a paranoia session written all tokens issued to the user to download images and data availability of the comer post of the token is checked in the session.

A special thank you for the clever ideas, tips and great knowledge of the topic himself in ZHS "float".
Share difficult, if not an Assembly) - lily.Kozey commented on June 14th 19 at 18:34
Please share, I'd be grateful! - Austen.Thompson53 commented on June 14th 19 at 18:37

Find more questions by tags HTMLJavaScriptjQuery