javascript - Is my way right to keep the previous value of file input in HTML? -
i'm using asp.net & want allow user upload multiple files multiple selection.
i searched many times on google , found way: if can append previous file (value) file input achieve want.
since read question: how set value file input in html?
my idea went wrong.
then, got solution: if clone input file?
let's test. (i don't want mention asp.net or asp.net core @ all. so, can test php if want. it's testing.)
model:
public class mymodel { public ienumerable<iformfile> files { get; set; } } razor:
<form method="post"> <!-- <input type="file" id="files" name="files" multiple /> --> <input asp-for="files" /> <button type="submit">submit</button> </form> script:
let onchanged = function () { let files = array.from(this.files); (let file of files) { // 'file' (previewing before uploading, etc...) } // if don't clear 'name' attribute here, // caught event in next time. // can add "hidden" class hide $(this).clone().prop('name', '').prependto('form'); }; let submit = function (e) { e.preventdefault(); // delay submitting // update 'name' property file inputs. $('[type=file]').prop('name', 'files'); // try submit $('form').submit(); // now, if 1 file input contains 1 uploaded file // in server, 'files.count()' return number // equals '$([type=file]).length' // files.count() == $([type=file]).length }; $(document) .on('change', '[name=files]' onchanged); .on('click', 'button', submit); running: click file input , select 1 file -> i'll clone file input. try again, i'll 2. after submitting, have 2 uploaded files. that's good.
why want achieve this? it's because i'm using dropzone plugin upload file. there no way put file input dropzone.
testing:
<div class="dropzone"> <!-- removed after pluggin completes setting --> <div class="fallback"> <input asp-for="files" /> </div> </div> <script> // before submiting form console.log($('#files').length); // 0 </script> my question: there risk if clone file input that?
thank you!
expand question:
although dropzone provides option: url upload file before previewing, want keep file in client, not ready upload server.
something this:
<form method="post" action="/question/ask"> <!-- text input here --> <input asp-for="title" /> <!-- pannel used uploading files... --> <div class="dropzone"> ... </div> <!-- click button submit (sending files server) --> <button type="submit">submit</button> </form> if allow upload file before submiting , user uploads 10 files, leaving without submitting. can unused files?
Comments
Post a Comment