10
Ho provato a eseguire più immagini di anteprima con jQuery. L'anteprima dell'immagine funziona bene, ma l'anteprima dell'immagine nello stesso div, ho bisogno di ogni anteprima dell'immagine in div differente. Come posso farlo?Anteprima immagine con jQuery
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*/
)}
Metodi
funzione per gestire il file Selezionare
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);
});
}
funzione per il modulo maniglia
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);
}
funzione per la rimozione di file, se cliccato
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();
}
$(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>
è possibile ricevere i dati per un'immagine src ? – Muhammed
Puoi usare all'interno della tua funzione 'handleFileSelect (e)' per ottenere il nome come 'e.target.name' questo restituirà' files' o 'mobile'. In base a ciò, puoi aggiungerlo a un div come desideri. –
Ciao, Volevo solo sapere come funziona la funzionalità di rimozione qui? Non funziona per me con il mio codice. Ciò richiede Handler.cfm? – Sravan