Try Demo below of the this script
<!doctype html>
<html>
<head>
<title>Proper Title</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:
<!doctype html>
<html>
<head>
<title>Proper Title</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:
0 comments:
Post a Comment