Menu
I tried to do multiple input image preview with jQuery. Previewing the image works fine, but the image preview in same div, I need each image preview in different div. How can I do it?
HTML
<html>
<form action="index.php" id="myForm" name="myForm" enctype="multipart/form-data" method="post" accept-charset="utf-8">
desktop:<input type="file" id="files" name="files" multiple><br/>
<div id="selectedFiles"></div>
mobile:<input type="file" id="mobile" name="mobile" multiple><br/>
<div id="selectFiles"></div>
<button type="submit">Submit</button>
</form></br></body>
</html>
custom.js
$(document).ready(function() {
/*multiple image preview first input*/
$("#files").on("change", handleFileSelect);
selDiv = $("#selectedFiles");
$("#myForm").on("submit", handleForm);
$("body").on("click", ".selFile", removeFile);
/*end image preview */
/* Multiple image preview second input*/
$("#mobile").on("change", handleFileSelect);
selDivM = $("#selectFiles");
$("#myForm").on("submit", handleForm);
$("body").on("click", ".selFile", removeFile);
/*end image preview*/
)}
Methods
function for Handle File Select
var selDiv = "";
var selDivM="";
var storedFiles = [];
function handleFileSelect(e) {
var files = e.target.files;
var filesArr = Array.prototype.slice.call(files);
filesArr.forEach(function(f) {
if(!f.type.match("image.*")) {
return;
}
storedFiles.push(f);
var reader = new FileReader();
reader.onload = function (e) {
var html = "<div><img src=\"" + e.target.result + "\" data-file='"+f.name+"' class='selFile' title='Click to remove'>" + f.name + "<br clear=\"left\"/></div>";
if ( typeof selDivM !== "") {
selDivM.append(html);
}else {
selDiv.append(html);
}
}
reader.readAsDataURL(f);
});
}
function for Handle Form
function handleForm(e) {
e.preventDefault();
var data = new FormData();
for(var i=0, len=storedFiles.length; i<len; i++) {
data.append('files', storedFiles[i]);
}
var xhr = new XMLHttpRequest();
xhr.open('POST', 'handler.cfm', true);
xhr.onload = function(e) {
if(this.status == 200) {
console.log(e.currentTarget.responseText);
alert(e.currentTarget.responseText + ' items uploaded.');
}
}
xhr.send(data);
}
function for remove file if clicked
function removeFile(e) {
var file = $(this).data("file");
for(var i=0;i<storedFiles.length;i++) {
if(storedFiles[i].name === file) {
storedFiles.splice(i,1);
break;
}
}
$(this).parent().remove();
}
see code pen snippet
$(document).ready(function() {
/*multiple image preview first input*/
$("#files").on("change", handleFileSelect);
selDiv = $("#selectedFiles");
$("#myForm").on("submit", handleForm);
$("body").on("click", ".selFile", removeFile);
/*end image preview */
/* Multiple image preview second input*/
$("#mobile").on("change", handleFileSelect);
selDivM = $("#selectFiles");
$("#myForm").on("submit", handleForm);
$("body").on("click", ".selFile", removeFile);
});
/*multiple image preview*/
var selDiv = "";
// var selDivM="";
var storedFiles = [];
function handleFileSelect(e) {
var files = e.target.files;
var filesArr = Array.prototype.slice.call(files);
filesArr.forEach(function(f) {
if(!f.type.match("image.*")) {
return;
}
storedFiles.push(f);
var reader = new FileReader();
reader.onload = function (e) {
var html = "<div><img src=\"" + e.target.result + "\" data-file='"+f.name+"' class='selFile' title='Click to remove'>" + f.name + "<br clear=\"left\"/></div>";
selDivM.append(html);
}
reader.readAsDataURL(f);
});
}
function handleForm(e) {
e.preventDefault();
var data = new FormData();
for(var i=0, len=storedFiles.length; i<len; i++) {
data.append('files', storedFiles[i]);
}
var xhr = new XMLHttpRequest();
xhr.open('POST', 'handler.cfm', true);
xhr.onload = function(e) {
if(this.status == 200) {
console.log(e.currentTarget.responseText);
alert(e.currentTarget.responseText + ' items uploaded.');
}
}
xhr.send(data);
}
function removeFile(e) {
var file = $(this).data("file");
for(var i=0;i<storedFiles.length;i++) {
if(storedFiles[i].name === file) {
storedFiles.splice(i,1);
break;
}
}
$(this).parent().remove();
}#selectedFiles img {
max-width: 200px;
max-height: 200px;
float: left;
margin-bottom:10px;
}
#userActions input{
width: auto;
margin: auto;
}
#selectFiles img {
max-width: 200px;
max-height: 200px;
float: left;
margin-bottom:10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<html>
<body>
<form action="index.php" id="myForm" name="myForm" enctype="multipart/form-data" method="post" accept-charset="utf-8">
desktop:<input type="file" id="files" name="files" multiple><br/>
<div id="selectedFiles"></div>
mobile:<input type="file" id="mobile" name="mobile" multiple><br/>
<div id="selectFiles"></div>
<button type="submit">Submit</button>
</form>
</body>
</html>
800
Answer: Use the JS readAsDataURL() Method You can use the JavaScript readAsDataURL() method of the FileReader object to read the contents of the specified file. When the read operation is finished, the readyState becomes DONE, and the loadend is triggered. The FileReader result property returns the file's contents.
Right-click on an image file and you should now see an Image Preview command in the popup menu. Click that command to view the image in Windows Photo Viewer (Figure D). Photo Viewer instantly pops up. Click the magnifying glass icon and move the slider to zoom in or out of the image.
This is based on your snipped.... create a div of preview based on the device type
$(document).ready(function() {
/*multiple image preview first input*/
$("#files").on("change", handleFileSelect);
selDiv = $("#selectedFiles");
$("#myForm").on("submit", handleForm);
$("body").on("click", ".selFile", removeFile);
/*end image preview */
/* Multiple image preview second input*/
$("#mobile").on("change", handleFileSelect);
selDivM = $("#selectFilesM");
$("#myForm").on("submit", handleForm);
$("body").on("click", ".selFile", removeFile);
console.log($("#selectFilesM").length);
});
/*multiple image preview*/
var selDiv = "";
// var selDivM="";
var storedFiles = [];
function handleFileSelect(e) {
var files = e.target.files;
var filesArr = Array.prototype.slice.call(files);
var device = $(e.target).data("device");
filesArr.forEach(function(f) {
if (!f.type.match("image.*")) {
return;
}
storedFiles.push(f);
var reader = new FileReader();
reader.onload = function(e) {
var html = "<div><img src=\"" + e.target.result + "\" data-file='" + f.name + "' class='selFile' title='Click to remove'>" + f.name + "<br clear=\"left\"/></div>";
if (device == "mobile") {
$("#selectedFilesM").append(html);
} else {
$("#selectedFiles").append(html);
}
}
reader.readAsDataURL(f);
});
}
function handleForm(e) {
e.preventDefault();
var data = new FormData();
for (var i = 0, len = storedFiles.length; i < len; i++) {
data.append('files', storedFiles[i]);
}
var xhr = new XMLHttpRequest();
xhr.open('POST', 'handler.cfm', true);
xhr.onload = function(e) {
if (this.status == 200) {
console.log(e.currentTarget.responseText);
alert(e.currentTarget.responseText + ' items uploaded.');
}
}
xhr.send(data);
}
function removeFile(e) {
var file = $(this).data("file");
for (var i = 0; i < storedFiles.length; i++) {
if (storedFiles[i].name === file) {
storedFiles.splice(i, 1);
break;
}
}
$(this).parent().remove();
}#selectedFiles img,
#selectFilesM img {
max-width: 200px;
max-height: 200px;
float: left;
margin-bottom: 10px;
}
#userActions input {
width: auto;
margin: auto;
}
#selectFiles img,
#selectFilesM img {
max-width: 200px;
max-height: 200px;
float: left;
margin-bottom: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="index.php" id="myForm" name="myForm" enctype="multipart/form-data" method="post" accept-charset="utf-8">
desktop:
<input data-device="desktop" type="file" id="files" name="files" multiple>
<div id="selectedFiles"></div>
<br/>mobile:
<input data-device="mobile" type="file" id="mobile" name="mobile" multiple>
<br/>
<div id="selectedFilesM"></div>
<button type="submit">Submit</button>
</form>You achive this as following code snippet
$("#fileUploadInput").change(function(event){
$("#filePreviewImage").attr('src',URL.createObjectURL(event.target.files[0]));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="fileUploadInput" type="file">
<img id="filePreviewImage" src="" alt="The image preview" height="90" width="160">Just replace "filePreviewImage" with your custom selector and it will populate the preview regardless of div. Enjoy ...
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
