How to access filenames and data associated with file inputs after moving them to a new element?

StackOverflow https://stackoverflow.com/questions/21883457

  •  13-10-2022
  •  | 
  •  

Pregunta

The draft title of this question was:

How is data attached to a file input?

I refined it further, but that gives a wider context as to what I am trying to understand.


I am trying to move file inputs from one div into another form.

I have come across this fiddle which shows how inputs can be moved to another element:

http://jsfiddle.net/Kennethtruyers/5ecPw/1/

And I amended it to this:

http://jsfiddle.net/rwone/eX3D7/

I am now trying to incorporate this into a more complex scenario which requires I understand more about how data is attached to a file input and whether qualities like the filename are automatically attached and programatically available.

The gist of both of the above examples is that the inputs can be retrieved and appended to another form with:

// get all the inputs
var inputs = $(".container_class input");
// append them to a form
$("#new_location").append(inputs);

This creates the markup in the new location of:

<input type="file" id="image_path" class="MultiFile-applied" name="undefined" value="" style="position: absolute; top: -3000px;">
<input type="file" id="image_path_F1" class="MultiFile-applied MultiFile" name="undefined" value="">

(Ignore the classes and positioning, they are generated by a plugin).

Before sending, I'll be creating a FormData object with:

var myFormData = new FormData($("#my_form")[0]);

So my question is:

All the markup seems correct in the new form but I cannot see any filenames in the markup.

Forgive my ignorance here, but if I went ahead and pressed submit on that form, would the filenames be accessible so that I could, for example, store the images corresponding filenames in a database?

¿Fue útil?

Solución

The filenames are automatically created from what I can tell:

https://stackoverflow.com/a/21942376/1063287

They can be accessed with logic such as:

request.files.input_name.filename

Or, for a more complex scenario, see this post where there are a dynamic number of inputs and the name of each input is unknown:

https://stackoverflow.com/a/21939421/1063287

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top