I am trying to pass an image and a title field value to PHP, I usually process file uploads straight with PHP using the $_FILES array, I am not sure how to create/pass this
You can use jQuery file upload plugin
$('#imgOne').change(function(){
$.ajaxFileUpload({
fileElementId: 'imgOne',
url: "../Controller/ProductController.php",
dataType: 'json',
success: function(response)
{
//Success Code Here
},
error: function()
{
//Error Code Here
}
});
});
First You need to Select image file through following line of html code
input type="file" id="image_to_upload"
After that you need to write the following jQuery code to catch this event.
jQuery.noConflict(); formdata = new FormData(); jQuery("#image_to_upload").on("change", function() { var file = this.files[0]; if (formdata) { formdata.append("image", file); jQuery.ajax({ url: "destination_ajax_file.php", type: "POST", data: formdata, processData: false, contentType: false, success:function(){} }); } });
In the destination ajax file you can access image by the following variable
print_r($_FILES);
More Info: http://www.rscoder.com/2020/06/how-to-upload-image-file-using-ajax.html
I did that in one of my project, and following code works for me. Please do required modifications in code as your need.
My Form button:
<form name="upload_img" enctype="multipart/form-data" id="upload_img">
<input type="file" style="display:none" id="upload-image" name="upload-image"></input>
<button id="upload_image" type="button">Save</button>
</form>
My JQuery/Ajax :
$('#upload_image').click(function()
{
var form = new FormData(document.getElementById('upload_img'));
//append files
var file = document.getElementById('upload-image').files[0];
if (file) {
form.append('upload-image', file);
}
$.ajax({
type: "POST",
url: "URL",
data: form,
cache: false,
contentType: false, //must, tell jQuery not to process the data
processData: false,
//data: $("#upload_img").serialize(),
success: function(data)
{
if(data == 1)
$('#img_msg').html("Image Uploaded Successfully");
else
$('#img_msg').html("Error While Image Uploading");
}
});
//alert('names');
});