Try Demo below of the this script
<!doctype html>
<html>
<head>
<title>Developer Baba</title>
<style>
#selectedFiles img {
max-width: 125px;
max-height: 125px;
float: left;
margin-bottom: 10px;
}
</style>
</head>
<body>
<form id="uploadForm" method="post" action="postsaccess.php" enctype="multipart/form-data">
<div>
<p>Upload Multiple Image:</p>
<p><input name="userImage[]" type="file" class="inputFile" id="files" multiple accept="image/*" /></p>
<p><input type="text" name="posts" /></p>
<p><input type="submit" value="Submit" name="sub" id="sub"/></p>
</div>
</form>
<div id="gallery1"></div>
<div id="gallery"></div>
<script src="jquery.min.js"></script>
<script>
$(function(){
$(".inputFile").change(function(e) {
alert(e.originalEvent.srcElement.files.length);
var files=e.target.files;
var filesArr=Array.prototype.slice.call(files);
filesArr.forEach(function(f){
if(!f.type.match("image.*")){ return ;}
var reader = new FileReader();
reader.onload=function(e){
var html = "<img src=\"" + e.target.result + "\">" + f.name + "<br clear=\"left\"/>";
document.getElementById('gallery').innerHTML += html;
}
reader.readAsDataURL(f);
})
});
$("#sub").click(function(){
var formData = new FormData($('#uploadForm'));
$.ajax({
type:'POST',
url:'update.php',
data: formData,
cache:'false',
success: function(res){$('#gallery1').html(res+'hi');}
});
return false;
});
});
</script>
</body>
</html>
Demo Test Now:
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon