Ich habe ein Bild-Upload-Formular, wo Sie auf "Bild auswählen" klicken und es öffnet das Dateiauswahlfenster. Sie wählen ein Bild und dann erscheint der Dateiname auf dem Bildschirm (nicht das Bild noch, nur der Dateiname) neben einem neu erschienenen "Hochladen" Knopf. Dann müssen Sie auf "Hochladen" klicken, damit das Bild wirklich hochgeladen und im Vorschaufenster angezeigt wird.Wie lade ich das Bild sofort hoch, nachdem die Datei ausgewählt wurde, anstatt den Benutzer zum Klicken auf die separate Schaltfläche "Hochladen" zu zwingen?
Ich würde gerne diesen Prozess zu verdichten, so dass, wenn jemand auf "Bild auswählen" klickt und das Bild, das sie hochladen möchten, entfernt den mittleren Mann und lädt das Bild sofort und zeigt ihnen das Bild im Vorschaufenster. Warum muss der Benutzer auf "Hochladen" klicken?
Ich habe meinen zugehörigen Code unten eingefügt. Gibt es eine Möglichkeit, meinen vorhandenen Code zu optimieren, damit der Upload-Teil unmittelbar nach der Dateiauswahl ausgeführt wird? Oder muss ich wahrscheinlich von vorne anfangen, um zu tun, was ich will?
Bild-Upload-Formular:
<li class="section">
<label class="caption" for="">Pool Image </label> (OPTIONAL - You can add one later if you don't have one now)<br>
<div id="preview"><img id="image" src="images/no-image.png" /></div>
<label for="uploadImage" id="custom-file-upload">
Choose Image
</label>
<span id="file-selected"></span>
<input id="uploadImage" type="file" accept="image/*" name="image" />
<input id="button" type="button" value="Upload" class="displaynone webkit">
<input id="remove-image" class="displaynone" type="button" value="Remove/Change">
<div id="err"></div>
</li>
<li class="section">
<a class="goback" id="cancel-and-remove-image" href='/my-pools'>« Cancel</a>
<input type="submit" name="submit" class="submit" value="Create Pool »" />
</li>
Diese JS ist auch auf der Seite:
$(document).ready(function() {
$("input:file").change(function(){
$("#button").show();
});
$('#uploadImage').on('change', function() { var fileName = ''; fileName = $(this).val(); $('#file-selected').html(fileName); });
$("#button").click(function(){
var imageData = new FormData();
imageData.append('image', $('#uploadImage')[0].files[0]);
//Make ajax call here:
$.ajax({
url: '/upload-image-ajax.php',
type: 'POST',
processData: false, // important
contentType: false, // important
data: imageData,
beforeSend : function() {
$("#err").fadeOut();
},
success: function(result) {
if(result=='invalid file') {
// invalid file format.
$("#err").html("Invalid File. Image must be JPEG, PNG or GIF.").fadeIn();
} else {
// view uploaded file.
$("#image").attr('src', '/'+result);
/* $("#preview").html(data).fadeIn();*/
/* $("#form")[0].reset(); */
//show the remove image button
$('#file-selected').empty();
$("#remove-image").show();
$("#custom-file-upload").hide();
$("#uploadImage").hide();
$("#button").hide();
}
},
error: function(result) {
$("#err").html("errorcity").fadeIn();
}
});
});
$("#remove-image").click(function(){
//Make ajax call here:
$.ajax({
url: "/remove-image.php",
type: 'POST',
processData: false, // important
contentType: false, // important
success: function(result) {
if(result=='gone') {
$("#image").attr('src', '/images/no-image.png');
$('#file-selected').empty();
$("#custom-file-upload").show();
$("#remove-image").hide();
$("#uploadImage").hide();
$("#button").hide();
} else {
$("#err").html("sorry"+result).fadeIn();
}
},
error: function(result) {
$("#err").html("error").fadeIn();
}
});
});
});
Dies ist der PHP-Skript, die AJAX-Aufrufe (dh upload-image-ajax.php):
<?php
require_once("includes/session.php");
$poolid=strtolower($_SESSION['poolid']); //lowercase it first so we get exact matches
$valid_extensions = array('jpeg', 'jpg', 'png', 'gif'); // valid extensions
if(isset($_FILES['image'])) {
$img = $_FILES['image']['name'];
$tmp = $_FILES['image']['tmp_name'];
// get uploaded file's extension
$ext = strtolower(pathinfo($img, PATHINFO_EXTENSION));
//checking if image exists for this pool and removing if so, before adding new image in its place
if(file_exists("uploads/".$poolid.".png")) {
unlink("uploads/".$poolid.".png");
}
// checks valid format
if(in_array($ext, $valid_extensions)) {
//re-size the image and make it a PNG before sending to server
$final_image = $poolid . ".png";
$path = "uploads/".strtolower($final_image);
$size = getimagesize($tmp);
$ratio = $size[0]/$size[1]; // width/height
if($ratio > 1) {
$width = 200;
$height = 200/$ratio;
}
else {
$width = 200*$ratio;
$height = 200;
}
$src = imagecreatefromstring(file_get_contents($tmp));
$dst = imagecreatetruecolor($width,$height);
imagecopyresampled($dst,$src,0,0,0,0,$width,$height,$size[0],$size[1]);
imagedestroy($src);
imagepng($dst, $path); // adjust format as needed
imagedestroy($dst);
$_SESSION['image_uploaded']="yes";
echo $path ."?".rand(1,32000);
} else {
echo 'invalid file';
}
}
?>