1. Create html form
<form class="fpd-upload-form" enctype="multipart/form-data" method="POST">
<div class="fpd-upload-zone">
<input type="file" multiple="multiple" class="fpd-input-image" id="fpd_upload_file" name="files[]">
</div>
</form>
<div class="fpd-upload-zone">
<input type="file" multiple="multiple" class="fpd-input-image" id="fpd_upload_file" name="files[]">
</div>
</form>
2. Jquery Code
<script>
$('#fpd_upload_file').on('change', function(){
//on change event
var fd = new FormData();
var files = $('#fpd_upload_file')[0].files[0];
fd.append('file', files);
$.ajax({
url: 'your-server-file-path/upload.php',
type: "POST",
data: fd,
processData: false,
contentType: false,
success: function (result) {
if(result != 0){
console.log(JSON.parse(result), result.name);
}
else{
alert('file not uploaded');
}
}
});
});
</script>
$('#fpd_upload_file').on('change', function(){
//on change event
var fd = new FormData();
var files = $('#fpd_upload_file')[0].files[0];
fd.append('file', files);
$.ajax({
url: 'your-server-file-path/upload.php',
type: "POST",
data: fd,
processData: false,
contentType: false,
success: function (result) {
if(result != 0){
console.log(JSON.parse(result), result.name);
}
else{
alert('file not uploaded');
}
}
});
});
</script>
3. create upload.php file on your server
<?php
header('Access-Control-Allow-Origin: *');
/* Getting file name */
$filename = $_FILES['file']['name'];
/* Location */
$location = "uploads/".$filename;
$uploadOk = 1;
if($uploadOk == 0){
echo 0;
}else{
/* Upload file */
if(move_uploaded_file($_FILES['file']['tmp_name'], $location)){
$image['name'] = $filename;
$image['url'] = 'your-server-folder-address'.$location; //for full image url with server
$json = json_encode($image);
echo $json;
}else{
echo 0;
}
}
?>
header('Access-Control-Allow-Origin: *');
/* Getting file name */
$filename = $_FILES['file']['name'];
/* Location */
$location = "uploads/".$filename;
$uploadOk = 1;
if($uploadOk == 0){
echo 0;
}else{
/* Upload file */
if(move_uploaded_file($_FILES['file']['tmp_name'], $location)){
$image['name'] = $filename;
$image['url'] = 'your-server-folder-address'.$location; //for full image url with server
$json = json_encode($image);
echo $json;
}else{
echo 0;
}
}
?>