Scribd
Upload
58 views2 pages

Jab

Uploaded by

genius_crystal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
58 views2 pages

Jab

Uploaded by

genius_crystal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html>
<head>
<title>How to upload Multiple Image files with jQuery AJAX and PHP | Adarsh
Jaiswal</title>

<script type="text/javascript" src='jquery-3.4.1.min.js'></script>

<style type="text/css">
#preview img{
margin: 5px;
}
</style>
</head>
<body>

<form method='post' action='' enctype="multipart/form-data">


<input type="file" id='files' name="files[]" multiple><br>
<input type="button" id="submit" value='Upload'>
</form>

<!-- Preview -->


<div id='preview'></div>

<!-- Script -->


<script type="text/javascript">
$(document).ready(function(){

$('#submit').on('submit', function(){

var form_data = new FormData();

// Read selected files


var totalfiles = document.getElementById('files').files.length;
for (var index = 0; index < totalfiles; index++) {
form_data.append("files[]",
document.getElementById('files').files[index]);
}

// AJAX request
$.ajax({
url: 'ajaxfile.php',
type: 'post',
data: form_data,
dataType: 'json',
contentType: false,
processData: false,
success: function (response) {

for(var index = 0; index < response.length; index++) {


var src = response[index];

// Add img element in <div id='preview'>


$('#preview').append('<img src="'+src+'"
width="200px;" height="200px">');
}

}
});
});
});
</script>
</body>
</html>

You might also like