Search jQuery

jQuery Forum

Using jQuery

Michael H..

How to Upload Multiple File type Input in one Go?

in Using jQuery • 7 years ago

I have 4 categories on my form. Each has 2 file type input. Here is an example of one:

<div class="row">
<div class="file-field input-field col s6">
<div class="btn">
<span>MANILA</span>
<input type="file" id="mnl_process">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
<div class="file-field input-field col s6">
<div class="btn">
<span>IN-COUNTRY</span>
<input type="file" id="inc_process">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</div>

So I need 4 of that code all I have to do is change the id from mnl_x to inc_x where x is the name of the category. In this case the category name is process.

I know AJAX, jQuery and PHP but I haven't tried to do uploads.

How should I approach this properly? So I can attach it under one button.

Here is my jQuery idea:

$("#upload_values").click(function() {
$("input[type=file]").each(function(){
//I'll insert ajax post here but I don't know how upload
});
});

Replies(1)

jakecigar

Re: How to Upload Multiple File type Input in one Go?

7 years ago

The ONLY way to do file uploads with AJAX is to use a FormData. The easiest way is to make a FormData is to use a… <form> tag with a proper action with all your inputs in it.

$("form").submit(function(){
var fd = new FormData(this);
$.ajax({
url: this.action,
type: "POST", // required
processData: false, // required
contentType: false, // required
data: fd,
success: function(data) {
console.log("Uploaded.", arguments)
$("#result").html(data) // do whatever you want
},
error: function() {
console.log("Error Uploading.", arguments)
}
})
return false
})

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

How to Upload Multiple File type Input in one Go?

Replies(1)

Re: How to Upload Multiple File type Input in one Go?

Statistics

Tags

Actions