Mit Bild Vorschau-Option, die den Daumen der ausgewählten Bilder zeigen.Bild Vorschau senden an php Datei über Ajax
Betrachten Sie den folgenden HTML,
html:
<input type="file" multiple accept="image/x-png,image/gif,image/jpeg" title="Upload Image" id="gallery_img" name="roomimage[]" />
-Code für die Vorschau-Bild in Browser verwendet:
$(document).ready(function() {
if (window.File && window.FileList && window.FileReader) {
$("#gallery").on("change", function(e) {
var fileName = document.getElementById("gallery").value;
var idxDot = fileName.lastIndexOf(".") + 1;
var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
//TO DO
var files = e.target.files,
filesLength = files.length;
for (var i = 0; i < filesLength; i++) {
var f = files[i]
var fileReader = new FileReader();
fileReader.onload = (function(e) {
var file = e.target;
$("<span class=\"imgPreview\">" +
"<img id=\"image\" name=\"image[]\" class=\"imageThumb\" src=\"" + e.target.result + "\"/>" +
"<span class=\"remove icon-error\" title=\"Close\"></span>" +
"</span>").insertAfter(".gallery_section");
$(".remove").click(function(){
$(this).parent(".imgPreview").remove();
});
});
fileReader.readAsDataURL(f);
}
}else{
alert("Only jpg/jpeg and png files are allowed!");
}
});
} else {
alert("Your browser doesn't support to File API")
}
});
Während Dateien mit dem oben html Auswahl alles funktioniert gut. Wie kann ich mehrere Bilder auswählen und ich kann diese mehrere Bilder über Ajax hochladen.
Ajax:
var formData = new FormData($("#room_form")[0]);
var url=$("#room_form").attr("action");
$.ajax({
method: "POST",
data: formData,
url: url,
cache: false,
contentType: false,
processData: false,
})
.success(function(data) {
loaderHide();
setTimeout(function() {
window.location.reload();
}, 1000);
}).
fail(function(data) {
loaderHide();
});
Das alles oben funktioniert gut.
Problem:
wenn ich wählen 3-Dateien. und ich zeige diese 3 Dateien in der Vorschau. wieder wähle ich zwei weitere Dateien, jetzt zeigt die Vorschau insgesamt 5 Dateien. Aber in <input type="file"
wird es nur 2 Dateien geben. Ich suchte und fand, dass es das Standardverhalten ist.
In der Bildquelle im Originalbild als Basis 64 codierte Bild aufweist. Ich muss dieses Bild an die PHP-Datei senden. Wie kann ich das machen?
Freigabe von Live Sie Demo? oder kompletter Code? Ich kann den Code der Vorschau nicht finden? – OIIO
@wow Code mit dem 'Vorschau Code' aktualisiert –
Warum nicht Live-Demo machen, wie Sie andere ID hier sind' gallery_img'! = 'Gallery' – OIIO