How can I upload only the file in input type file without sending the entire form?

Question

I'm writing a survey and I have a form with lot of inputs. The first ten are for personal data like and images, the others, in variable number, will be the questions of my survey.

I want the user to upload multiple images, but I'd like he could even remove some images right before. I know I can't remove files from the file object, so I had this idea: if I could upload the image right in the moment the user chooses (the on input event, or maybe on load) without sending the form I will store the image in a temporary folder (and with a js function I'll handle the file inputs to replace with a new one etc.).

So, finally, the question is: is there a way to upload a single input, maybe with ajax, without sending all inputs?

Thanks, the problem is that I cant remember which methods to use. If I use form.submit(), even if is in another page, this will send the entire form, right? — RufusJoy
– RufusJoy, Commented Sep 10, 2021 at 14:08
yes - using form.submit() will submit the entire form. Perhaps adding your HTML markup would be a good idea? — Professor Abronsius
– Professor Abronsius, Commented Sep 10, 2021 at 14:15
I'm sorry if I didn't paste the html, but is very dirty and some parts are generated dinamically, so it would be very messy. Anyway, I noticed that the $_FILES array is filled with the image data even if I don't send the form. This give me the opportunity to handle the file without sending data, I just use AJAX to start a php script in the same page. Thank you so much :) — RufusJoy
– RufusJoy, Commented Sep 10, 2021 at 16:37

Salman Akbar · Accepted Answer · 2021-09-10 14:16:35Z

You can use ajax like this

 let formData = new FormData() var d = $('#fileid')[0].files[0] // field name formData.append('fileid', d); formData.append('inputname', value); $.ajax({ url: '/yourroute', method: 'POST', contentType: false, processData: false, data: formData, success: function(res){ console.log('successfully') }, error: function(){ console.log('error') } })

Collectives™ on Stack Overflow

How can I upload only the file in input type file without sending the entire form?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related