Hallo,
ich arbeite schon länger mit Formularen die ich über Ajax absende um so die Seite nicht neu laden zu müssen.
Nun steh ich vor dem Problem das ich einen Bilder-Upload so realisieren möchte, nur scheint es da Probleme zu geben. Aber schon zahlreiche Tutorials im Web gelesen und hab dadurch erfahren dass es sehr umständlich ist Bilder über diese Methode hochzuladen. Hab versucht ein paar Tutorials umzusetzen, aber leider ohne Erfolg.
Hoffe mir kann jemand helfen, ich sende anbei mal den Code.
Das Formular:
upload.js
Die PHP Datei die die Anfrage verarbeitet hab ich mal weggelassen, da diese im Moment nicht von Bedeutung ist.
Vielen Dank im Voraus!
Mfg
ich arbeite schon länger mit Formularen die ich über Ajax absende um so die Seite nicht neu laden zu müssen.
Nun steh ich vor dem Problem das ich einen Bilder-Upload so realisieren möchte, nur scheint es da Probleme zu geben. Aber schon zahlreiche Tutorials im Web gelesen und hab dadurch erfahren dass es sehr umständlich ist Bilder über diese Methode hochzuladen. Hab versucht ein paar Tutorials umzusetzen, aber leider ohne Erfolg.
Hoffe mir kann jemand helfen, ich sende anbei mal den Code.
Das Formular:
PHP:
<script src="js/upload.js"></script>
<form method="post" name="imgform" id="imgform" action="" enctype="multipart/form-data">
<p><input type="file" name="image" id="image" required="required"></p>
<p><input type="text" name="title" class="upload_field" placeholder="Titel" required="required"><br />
<input type="text" name="description" class="upload_field" placeholder="Beschreibung" required="required"></p>
<input type="submit" name="submit" id="submit" value="Hochladen">
</form>
Code:
$(document).ready(function() {
var form = $('#imgform');
var submit = $('#submit');
var alert = $('.feedback');
form.on('submit', function(e) {
e.preventDefault();
$.ajax({
url: 'php/upload.php',
type: 'POST',
dataType: 'html',
data: form.serialize(),
beforeSend: function() {
alert.fadeOut();
submit.html('.....');
},
success: function(data) {
alert.html(data).fadeIn();
form.trigger('reset');
submit.html('Send Picture');
window.location = pinsucc;
},
error: function(e) {
console.log(e)
}
});
});
});
Vielen Dank im Voraus!
Mfg