Hochladen von jQuery Ajax-Dateien

755

Kann ich den folgenden jQuery-Code verwenden, um das Hochladen von Dateien mithilfe der POST-Methode einer Ajax-Anforderung durchzuführen?

$.ajax({
    type: "POST",
    timeout: 50000,
    url: url,
    data: dataString,
    success: function (data) {
        alert('success');
        return false;
    }
});

Wenn es möglich ist, muss ich ein dataTeil füllen ? Ist es der richtige Weg? Ich poste die Datei nur auf der Serverseite.

Ich habe herum gegoogelt, aber was ich gefunden habe, war ein Plugin, während ich es in meinem Plan nicht verwenden möchte. Zumindest für den Moment.

Willy
quelle
Ajax unterstützt keine Datei-Uploads, Sie sollten stattdessen iframe verwenden
antyrat
1
Verwandte Frage: stackoverflow.com/questions/6974684/…
Nathan Koop
2
Siehe auch
Timo Huovinen

Antworten:

596

Das Hochladen von Dateien ist über AJAX nicht möglich.
Sie können eine Datei hochladen, ohne die Seite mit zu aktualisieren IFrame.
Weitere Details können Sie hier überprüfen .


AKTUALISIEREN

Mit XHR2 wird das Hochladen von Dateien über AJAX unterstützt. ZB durch FormDataObjekt, aber leider wird es nicht von allen / alten Browsern unterstützt.

FormData Die Unterstützung beginnt mit den folgenden Versionen des Desktop-Browsers.

  • IE 10+
  • Firefox 4.0+
  • Chrome 7+
  • Safari 5+
  • Opera 12+

Weitere Informationen finden Sie unter MDN-Link .

Adeel
quelle
41
Hier ist eine Liste der spezifischen Browser, die nicht unterstützt werden: caniuse.com/#search=FormData Auch ich habe dies nicht getestet, aber hier ist eine Polyfüllung für FormData gist.github.com/3120320
Ryan White
152
Insbesondere IE <10 nicht, für diejenigen, die zu faul sind, um den Link zu lesen.
Kevin
22
@Synexis Nein, wir müssen nicht mehr so ​​lange warten, da alle IE nur einen weltweiten Marktanteil von 22% und 27% in den USA haben und schnell fallen. Wahrscheinlich sind es Menschen über 70 Jahre alt. Anstatt dass der IE vorschreibt, was Entwickler tun müssen, muss sich der IE entweder formen oder aus dem Rennen aussteigen.
Drew Calder
30
@DrewCalder Die meisten IE-Benutzer sind Büroangestellte, die aufgrund von Unternehmensrichtlinien nicht die Wahl haben, welchen Browser sie verwenden möchten. Ich glaube nicht, dass Alter viel damit zu tun hat. Ich vermute, die meisten Leute> 70 bringen ihre Nachkommen dazu, stattdessen Chrome oder FF zu installieren :)
Nicolas Connault
3
Dieser Link hat mir wirklich geholfen, das Nötigste zu verstehen. Ich musste keine xhr-Anfrage verwenden. Wenn Sie Ajax verwenden, stellen Sie sicher, dass enctypeauf "form/multipart"!
Leuchtend
316

Iframes werden nicht mehr zum Hochladen von Dateien über Ajax benötigt. Ich habe es kürzlich selbst gemacht. Schauen Sie sich diese Seiten an:

Verwenden von HTML5-Datei-Uploads mit AJAX und jQuery

http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface

Die Antwort wurde aktualisiert und bereinigt. Verwenden Sie die Funktion getSize, um die Größe zu überprüfen, oder verwenden Sie die Funktion getType, um die Typen zu überprüfen. Progressbar HTML- und CSS-Code hinzugefügt.

var Upload = function (file) {
    this.file = file;
};

Upload.prototype.getType = function() {
    return this.file.type;
};
Upload.prototype.getSize = function() {
    return this.file.size;
};
Upload.prototype.getName = function() {
    return this.file.name;
};
Upload.prototype.doUpload = function () {
    var that = this;
    var formData = new FormData();

    // add assoc key values, this will be posts values
    formData.append("file", this.file, this.getName());
    formData.append("upload_file", true);

    $.ajax({
        type: "POST",
        url: "script",
        xhr: function () {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                myXhr.upload.addEventListener('progress', that.progressHandling, false);
            }
            return myXhr;
        },
        success: function (data) {
            // your callback here
        },
        error: function (error) {
            // handle error
        },
        async: true,
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        timeout: 60000
    });
};

Upload.prototype.progressHandling = function (event) {
    var percent = 0;
    var position = event.loaded || event.position;
    var total = event.total;
    var progress_bar_id = "#progress-wrp";
    if (event.lengthComputable) {
        percent = Math.ceil(position / total * 100);
    }
    // update progressbars classes so it fits your code
    $(progress_bar_id + " .progress-bar").css("width", +percent + "%");
    $(progress_bar_id + " .status").text(percent + "%");
};

Verwendung der Upload-Klasse

//Change id to your id
$("#ingredient_file").on("change", function (e) {
    var file = $(this)[0].files[0];
    var upload = new Upload(file);

    // maby check size or type here with upload.getSize() and upload.getType()

    // execute upload
    upload.doUpload();
});

HTML-Code für den Fortschrittsbalken

<div id="progress-wrp">
    <div class="progress-bar"></div>
    <div class="status">0%</div>
</div>

Progressbar CSS-Code

#progress-wrp {
  border: 1px solid #0099CC;
  padding: 1px;
  position: relative;
  height: 30px;
  border-radius: 3px;
  margin: 10px;
  text-align: left;
  background: #fff;
  box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
}

#progress-wrp .progress-bar {
  height: 100%;
  border-radius: 3px;
  background-color: #f39ac7;
  width: 0;
  box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
}

#progress-wrp .status {
  top: 3px;
  left: 50%;
  position: absolute;
  display: inline-block;
  color: #000000;
}
Ziinloader
quelle
3
Sie können den Code mehr oder weniger sofort kopieren und verwenden. Ändern Sie einfach einige ID-Namen und Klassennamen. Jede Anpassung erfolgt auf eigene Faust.
Ziinloader
4
Beachten Sie, dass myXhr global zu sein scheint sowie Name, Größe und Typ. Es ist auch besser, "beforeSend" zu verwenden, um das bereits erstellte XMLHttpRequest-Objekt zu erweitern, als "xhr" zu verwenden, um eines zu erstellen, und es dann zu ändern.
Awatts
8
Ich glaube nicht, dass wir das so nutzen können wie @Ziinloader. Sie verwenden eine lokale Methode, die nicht enthalten ist : writer(catchFile). Was ist writer()?
Tandrewnichols
4
Was ist, wenn die Daten neben der hochzuladenden Datei auch wenige Felder enthalten?
Raju
2
@Ziinloader Dies ist ein äußerst nützliches Beispiel, zu dem Sie mehrmals zurückgekehrt sind und das Sie mehrmals gewartet haben. Wirklich eine Antwort, die viel mehr wert ist als die, die ich geben kann.
Regular Joe
190

Ajax Post- und Upload-Datei ist möglich. Ich benutze die jQuery $.ajaxFunktion, um meine Dateien zu laden. Ich habe versucht, das XHR-Objekt zu verwenden, konnte jedoch mit PHP keine Ergebnisse auf der Serverseite erzielen.

var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);

$.ajax({
       url : 'upload.php',
       type : 'POST',
       data : formData,
       processData: false,  // tell jQuery not to process the data
       contentType: false,  // tell jQuery not to set contentType
       success : function(data) {
           console.log(data);
           alert(data);
       }
});

Wie Sie sehen können, müssen Sie ein FormData-Objekt erstellen, leer oder aus (serialisiert? - $('#yourForm').serialize())vorhandenem Formular), und dann die Eingabedatei anhängen.

Weitere Informationen: - Hochladen einer Datei mit jQuery.ajax und FormData - Hochladen von Dateien über jQuery, Objekt FormData wird bereitgestellt und kein Dateiname, GET-Anforderung

Für den PHP-Prozess können Sie Folgendes verwenden:

//print_r($_FILES);
$fileName = $_FILES['file']['name'];
$fileType = $_FILES['file']['type'];
$fileError = $_FILES['file']['error'];
$fileContent = file_get_contents($_FILES['file']['tmp_name']);

if($fileError == UPLOAD_ERR_OK){
   //Processes your file here
}else{
   switch($fileError){
     case UPLOAD_ERR_INI_SIZE:   
          $message = 'Error al intentar subir un archivo que excede el tamaño permitido.';
          break;
     case UPLOAD_ERR_FORM_SIZE:  
          $message = 'Error al intentar subir un archivo que excede el tamaño permitido.';
          break;
     case UPLOAD_ERR_PARTIAL:    
          $message = 'Error: no terminó la acción de subir el archivo.';
          break;
     case UPLOAD_ERR_NO_FILE:    
          $message = 'Error: ningún archivo fue subido.';
          break;
     case UPLOAD_ERR_NO_TMP_DIR: 
          $message = 'Error: servidor no configurado para carga de archivos.';
          break;
     case UPLOAD_ERR_CANT_WRITE: 
          $message= 'Error: posible falla al grabar el archivo.';
          break;
     case  UPLOAD_ERR_EXTENSION: 
          $message = 'Error: carga de archivo no completada.';
          break;
     default: $message = 'Error: carga de archivo no completada.';
              break;
    }
      echo json_encode(array(
               'error' => true,
               'message' => $message
            ));
}
pedrozopayares
quelle
2
Auf welche Abfragebibliothek muss ich verweisen, um diesen Code auszuführen?
Rayden Black
Die Antwort wurde 2014 geschrieben. Die Version von JQuery war 1.10. Ich habe es nicht mit neueren Versionen versucht.
pedrozopayares
5
formData.append('file', $('#file')[0].files[0]);kehrt zurück undefinedund console.log(formData) hat nichts außer_proto_
Yakob Ubaidi
1
Wird
3
Ich habe das zum Laufen gebracht ... Kneif mich, ich bin auf jQuery Ajax Datei Upload Himmel! var formData = new FormData(); formData.append('file', document.getElementById('file').files[0]); $.ajax({ url : $("form[name='uploadPhoto']").attr("action"), type : 'POST', data : formData, processData: false, // tell jQuery not to process the data contentType: false, // tell jQuery not to set contentType success : function(data) { console.log(data); alert(data); } });
TARKUS
104

Einfaches Upload-Formular

 <script>
   //form Submit
   $("form").submit(function(evt){	 
      evt.preventDefault();
      var formData = new FormData($(this)[0]);
   $.ajax({
       url: 'fileUpload',
       type: 'POST',
       data: formData,
       async: false,
       cache: false,
       contentType: false,
       enctype: 'multipart/form-data',
       processData: false,
       success: function (response) {
         alert(response);
       }
   });
   return false;
 });
</script>
<!--Upload Form-->
<form>
  <table>
    <tr>
      <td colspan="2">File Upload</td>
    </tr>
    <tr>
      <th>Select File </th>
      <td><input id="csv" name="csv" type="file" /></td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="submit" value="submit"/> 
      </td>
    </tr>
  </table>
</form>

Vickisys
quelle
Sir, was sind die js, die in diesem Beispiel verwendet wurden? Gibt es ein spezielles jquery-Plugin für dieses? Ich habe eine Frage, auf die ich hier hingewiesen wurde. Können Sie bitte meine Frage überprüfen? Ich möchte hier mehrere Dateien oder Bilder in dieses Projekt hochladen ist der Link stackoverflow.com/questions/28644200/…
Brownman Revival
19
$ (this) [0] is this
machineaddict
2
Was ist der Parameter auf dem Server für die veröffentlichte Datei? Können Sie bitte Serverteil posten.
FrenkyB
@FrenkyB und andere - die Dateien auf dem Server (in PHP) werden nicht in der Variablen $ _POST gespeichert - sie werden in der Variablen $ _FILES gespeichert. In diesem Fall würden Sie mit $ _FILES ["csv"] darauf zugreifen, da "csv" das Namensattribut des Eingabe-Tags ist.
dev_masta
68

Ich bin ziemlich spät dran, aber ich habe nach einer Ajax-basierten Lösung zum Hochladen von Bildern gesucht und die Antwort, nach der ich gesucht habe, war in diesem Beitrag irgendwie verstreut. Die Lösung, für die ich mich entschieden habe, betraf das FormData-Objekt. Ich habe eine Grundform des Codes zusammengestellt, den ich zusammengestellt habe. Sie können sehen, wie Sie mit fd.append () ein benutzerdefiniertes Feld zum Formular hinzufügen und wie Sie mit Antwortdaten umgehen, wenn die Ajax-Anforderung abgeschlossen ist.

HTML hochladen:

<!DOCTYPE html>
<html>
<head>
    <title>Image Upload Form</title>
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        function submitForm() {
            console.log("submit event");
            var fd = new FormData(document.getElementById("fileinfo"));
            fd.append("label", "WEBUPLOAD");
            $.ajax({
              url: "upload.php",
              type: "POST",
              data: fd,
              processData: false,  // tell jQuery not to process the data
              contentType: false   // tell jQuery not to set contentType
            }).done(function( data ) {
                console.log("PHP Output:");
                console.log( data );
            });
            return false;
        }
    </script>
</head>

<body>
    <form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();">
        <label>Select a file:</label><br>
        <input type="file" name="file" required />
        <input type="submit" value="Upload" />
    </form>
    <div id="output"></div>
</body>
</html>

Wenn Sie mit PHP arbeiten, finden Sie hier eine Möglichkeit, den Upload zu handhaben. Dazu gehört die Verwendung der beiden im obigen HTML-Code gezeigten benutzerdefinierten Felder.

Upload.php

<?php
if ($_POST["label"]) {
    $label = $_POST["label"];
}
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 200000)
&& in_array($extension, $allowedExts)) {
    if ($_FILES["file"]["error"] > 0) {
        echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
    } else {
        $filename = $label.$_FILES["file"]["name"];
        echo "Upload: " . $_FILES["file"]["name"] . "<br>";
        echo "Type: " . $_FILES["file"]["type"] . "<br>";
        echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
        echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";

        if (file_exists("uploads/" . $filename)) {
            echo $filename . " already exists. ";
        } else {
            move_uploaded_file($_FILES["file"]["tmp_name"],
            "uploads/" . $filename);
            echo "Stored in: " . "uploads/" . $filename;
        }
    }
} else {
    echo "Invalid file";
}
?>
lee8oi
quelle
Ich Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https,verstehe , warum das so ist, Sir, ich kopiere,
füge
2
@HogRider - Wenn Sie Ihre Fehlermeldung googeln, ist dies das erste Ergebnis: stackoverflow.com/questions/10752055/… Greifen Sie lokal über Ihre Webseiten zu file://, anstatt einen Webserver zu verwenden? Abgesehen davon ist es nicht empfehlenswert, Code einfach blind zu kopieren und einzufügen, ohne ihn vorher zu verstehen. Ich würde empfehlen, dass Sie den Code Zeile für Zeile durchgehen, um zu verstehen, was passiert, bevor Sie den Code verwenden.
Colincameron
@colincameron, danke, dass du ein paar Dinge geklärt hast, die ich Zeile für Zeile durchgearbeitet habe, und ich verstehe nicht wirklich viel, also habe ich die Frage gestellt, damit jemand meine Zweifel klären kann. Ich benutze lokal übrigens xampp, um genau zu sein. Kann ich eine Frage stellen, die Sie vielleicht klären können?
Brownman Revival
@Brownman Revival: Ich weiß, dass es für die Antwort zu spät ist. Sie haben einen Cross-Origin-Fehler erhalten, weil Sie die HTML-Datei als Datei geöffnet haben, anstatt sie vom Server auszuführen.
Adarsh ​​Mohan
@AdarshMohan Ich schätze die Antwort. Wie schlagen Sie vor, dass ich es tue, um es richtig zu machen?
Brownman Revival
31

Ein AJAX-Upload ist in der Tat mit möglich XMLHttpRequest(). Keine iframes notwendig. Der Upload-Fortschritt kann angezeigt werden.

Weitere Informationen finden Sie unter: Beantworten Sie https://stackoverflow.com/a/4943774/873282 , um den Fortschritt des jQuery-Uploads und das Hochladen der AJAX-Datei in Frage zu stellen .

koppor
quelle
24
Leider unterstützt IE <10 dies nicht.
Sasha Chedygov
1
Wenn Sie lediglich als Antwort auf eine andere Seite verweisen möchten, können Sie abstimmen, um als Dupkucate zu schließen, oder einen Kommentar unter der Frage hinterlassen. Dieser Beitrag ist keine Antwort. Ein Beitrag dieser Art sieht aus wie ein Versuch, einen Repräsentanten zu bewirtschaften.
Mickmackusa
18

So habe ich das zum Laufen gebracht:

HTML

<input type="file" id="file">
<button id='process-file-button'>Process</button>

JS

$('#process-file-button').on('click', function (e) {
    let files = new FormData(), // you can consider this as 'data bag'
        url = 'yourUrl';

    files.append('fileName', $('#file')[0].files[0]); // append selected file to the bag named 'file'

    $.ajax({
        type: 'post',
        url: url,
        processData: false,
        contentType: false,
        data: files,
        success: function (response) {
            console.log(response);
        },
        error: function (err) {
            console.log(err);
        }
    });
});

PHP

if (isset($_FILES) && !empty($_FILES)) {
    $file = $_FILES['fileName'];
    $name = $file['name'];
    $path = $file['tmp_name'];


    // process your file

}
М.Б.
quelle
2
Was mir dabei am meisten geholfen hat, war die $('#file')[0].files[0]seltsame JS-Problemumgehung, ohne dass eine ordnungsgemäße <form>
Lösung
Dies ist die komplette Lösung, das PHP-Bit hilft auch.
CDsaenz
14

Für den Fall, dass Sie es so machen möchten:

$.upload( form.action, new FormData( myForm))
.progress( function( progressEvent, upload) {
    if( progressEvent.lengthComputable) {
        var percent = Math.round( progressEvent.loaded * 100 / progressEvent.total) + '%';
        if( upload) {
            console.log( percent + ' uploaded');
        } else {
            console.log( percent + ' downloaded');
        }
    }
})
.done( function() {
    console.log( 'Finished upload');                    
});

als

https://github.com/lgersman/jquery.orangevolt-ampere/blob/master/src/jquery.upload.js

könnte Ihre Lösung sein.

lgersman
quelle
Wo ist die Upload-Methode in $ Objekt, der obige Link ist nicht vorhanden
coolesting
2
Vielen Dank für Ihre Antwort! Bitte lesen Sie die FAQ zur Eigenwerbung sorgfältig durch. Beachten Sie auch , dass Sie jedes Mal, wenn Sie auf Ihre eigene Website / Ihr eigenes Produkt verlinken, einen Haftungsausschluss veröffentlichen müssen.
Andrew Barber
13
  • Verwenden Sie einen versteckten Iframe und setzen Sie das Ziel Ihres Formulars auf den Namen dieses Iframes. Auf diese Weise wird beim Senden des Formulars nur der Iframe aktualisiert.
  • Lassen Sie einen Ereignishandler für das Ladeereignis des Iframes registrieren, um die Antwort zu analysieren.

Weitere Details zu meinem Blog-Beitrag: http://blog.manki.in/2011/08/ajax-fie-upload.html .

Manki
quelle
Vermeiden Sie Iframes wo möglich
Bhargav Nanekalva
@ BhargavNanekalva was ist dein Anliegen?
aswzen
13
$("#submit_car").click( function() {
  var formData = new FormData($('#car_cost_form')[0]);
$.ajax({
       url: 'car_costs.php',
       data: formData,
       async: false,
       contentType: false,
       processData: false,
       cache: false,
       type: 'POST',
       success: function(data)
       {
       },
     })    return false;    
});

Bearbeiten: Inhaltstyp und Prozessdaten notieren Sie können dies einfach verwenden, um Dateien über Ajax hochzuladen. Die Eingabe kann nicht außerhalb des Formularelements erfolgen :)

Gvice
quelle
3
Mit dieser Methode können Sie Formulare veröffentlichen, jedoch nicht mit Feldern vom Typ 'Datei'. Diese Frage bezieht sich speziell auf das Hochladen von Dateien.
Jomy John
11

Update 2019:

html

<form class="fr" method='POST' enctype="multipart/form-data"> {% csrf_token %}
<textarea name='text'>
<input name='example_image'>
<button type="submit">
</form>

js

$(document).on('submit', '.fr', function(){

    $.ajax({ 
        type: 'post', 
        url: url, <--- you insert proper URL path to call your views.py function here.
        enctype: 'multipart/form-data',
        processData: false,
        contentType: false,
        data: new FormData(this) ,
        success: function(data) {
             console.log(data);
        }
        });
        return false;

    });

views.py

form = ThisForm(request.POST, request.FILES)

if form.is_valid():
    text = form.cleaned_data.get("text")
    example_image = request.FILES['example_image']
Jay
quelle
1
Wie kann dies die bereits gegebenen Antworten verbessern? Auch diese Antwort erwähnt eine views.py-Datei, die Django ist und nichts mit der Frage zu tun hat.
Dirkgroten
6
Da sich das Problem bei der Verwendung von Django vergleichbar manifestiert und Sie Django verwenden, gibt es hier nicht viel Richtung, um es zu lösen. Ich dachte, ich würde proaktive Hilfe anbieten, falls jemand hier ankommt, wie ich es in Zukunft getan habe. Einen harten Tag haben?
Jay
9

Verwenden Sie FormData. Es funktioniert wirklich gut :-) ...

var jform = new FormData();
jform.append('user',$('#user').val());
jform.append('image',$('#image').get(0).files[0]); // Here's the important bit

$.ajax({
    url: '/your-form-processing-page-url-here',
    type: 'POST',
    data: jform,
    dataType: 'json',
    mimeType: 'multipart/form-data', // this too
    contentType: false,
    cache: false,
    processData: false,
    success: function(data, status, jqXHR){
        alert('Hooray! All is well.');
        console.log(data);
        console.log(status);
        console.log(jqXHR);

    },
    error: function(jqXHR,status,error){
        // Hopefully we should never reach here
        console.log(jqXHR);
        console.log(status);
        console.log(error);
    }
});
delboy1978uk
quelle
das ist was: ('user', $ ('# user'). val ());
rahim.nagori
Textfeld mit id = "Benutzer" wird an das Formular @ rahim.nagori
Alp Altunel
7

Ich habe eine Auswahl mehrerer Dateien mit sofortiger Vorschau und Upload implementiert, nachdem unerwünschte Dateien über Ajax aus der Vorschau entfernt wurden.

Eine ausführliche Dokumentation finden Sie hier: http://anasthecoder.blogspot.ae/2014/12/multi-file-select-preview-without.html

Demo: http://jsfiddle.net/anas/6v8Kz/7/embedded/result/

jsFiddle: http://jsfiddle.net/anas/6v8Kz/7/

Javascript:

    $(document).ready(function(){
    $('form').submit(function(ev){
        $('.overlay').show();
        $(window).scrollTop(0);
        return upload_images_selected(ev, ev.target);
    })
})
function add_new_file_uploader(addBtn) {
    var currentRow = $(addBtn).parent().parent();
    var newRow = $(currentRow).clone();
    $(newRow).find('.previewImage, .imagePreviewTable').hide();
    $(newRow).find('.removeButton').show();
    $(newRow).find('table.imagePreviewTable').find('tr').remove();
    $(newRow).find('input.multipleImageFileInput').val('');
    $(addBtn).parent().parent().parent().append(newRow);
}

function remove_file_uploader(removeBtn) {
    $(removeBtn).parent().parent().remove();
}

function show_image_preview(file_selector) {
    //files selected using current file selector
    var files = file_selector.files;
    //Container of image previews
    var imageContainer = $(file_selector).next('table.imagePreviewTable');
    //Number of images selected
    var number_of_images = files.length;
    //Build image preview row
    var imagePreviewRow = $('<tr class="imagePreviewRow_0"><td valign=top style="width: 510px;"></td>' +
        '<td valign=top><input type="button" value="X" title="Remove Image" class="removeImageButton" imageIndex="0" onclick="remove_selected_image(this)" /></td>' +
        '</tr> ');
    //Add image preview row
    $(imageContainer).html(imagePreviewRow);
    if (number_of_images > 1) {
        for (var i =1; i<number_of_images; i++) {
            /**
             *Generate class name of the respective image container appending index of selected images, 
             *sothat we can match images selected and the one which is previewed
             */
            var newImagePreviewRow = $(imagePreviewRow).clone().removeClass('imagePreviewRow_0').addClass('imagePreviewRow_'+i);
            $(newImagePreviewRow).find('input[type="button"]').attr('imageIndex', i);
            $(imageContainer).append(newImagePreviewRow);
        }
    }
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        /**
         * Allow only images
         */
        var imageType = /image.*/;
        if (!file.type.match(imageType)) {
          continue;
        }

        /**
         * Create an image dom object dynamically
         */
        var img = document.createElement("img");

        /**
         * Get preview area of the image
         */
        var preview = $(imageContainer).find('tr.imagePreviewRow_'+i).find('td:first');

        /**
         * Append preview of selected image to the corresponding container
         */
        preview.append(img); 

        /**
         * Set style of appended preview(Can be done via css also)
         */
        preview.find('img').addClass('previewImage').css({'max-width': '500px', 'max-height': '500px'});

        /**
         * Initialize file reader
         */
        var reader = new FileReader();
        /**
         * Onload event of file reader assign target image to the preview
         */
        reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
        /**
         * Initiate read
         */
        reader.readAsDataURL(file);
    }
    /**
     * Show preview
     */
    $(imageContainer).show();
}

function remove_selected_image(close_button)
{
    /**
     * Remove this image from preview
     */
    var imageIndex = $(close_button).attr('imageindex');
    $(close_button).parents('.imagePreviewRow_' + imageIndex).remove();
}

function upload_images_selected(event, formObj)
{
    event.preventDefault();
    //Get number of images
    var imageCount = $('.previewImage').length;
    //Get all multi select inputs
    var fileInputs = document.querySelectorAll('.multipleImageFileInput');
    //Url where the image is to be uploaded
    var url= "/upload-directory/";
    //Get number of inputs
    var number_of_inputs = $(fileInputs).length; 
    var inputCount = 0;

    //Iterate through each file selector input
    $(fileInputs).each(function(index, input){

        fileList = input.files;
        // Create a new FormData object.
        var formData = new FormData();
        //Extra parameters can be added to the form data object
        formData.append('bulk_upload', '1');
        formData.append('username', $('input[name="username"]').val());
        //Iterate throug each images selected by each file selector and find if the image is present in the preview
        for (var i = 0; i < fileList.length; i++) {
            if ($(input).next('.imagePreviewTable').find('.imagePreviewRow_'+i).length != 0) {
                var file = fileList[i];
                // Check the file type.
                if (!file.type.match('image.*')) {
                    continue;
                }
                // Add the file to the request.
                formData.append('image_uploader_multiple[' +(inputCount++)+ ']', file, file.name);
            }
        }
        // Set up the request.
        var xhr = new XMLHttpRequest();
        xhr.open('POST', url, true);
        xhr.onload = function () {
            if (xhr.status === 200) {
                var jsonResponse = JSON.parse(xhr.responseText);
                if (jsonResponse.status == 1) {
                    $(jsonResponse.file_info).each(function(){
                        //Iterate through response and find data corresponding to each file uploaded
                        var uploaded_file_name = this.original;
                        var saved_file_name = this.target;
                        var file_name_input = '<input type="hidden" class="image_name" name="image_names[]" value="' +saved_file_name+ '" />';
                        file_info_container.append(file_name_input);

                        imageCount--;
                    })
                    //Decrement count of inputs to find all images selected by all multi select are uploaded
                    number_of_inputs--;
                    if(number_of_inputs == 0) {
                        //All images selected by each file selector is uploaded
                        //Do necessary acteion post upload
                        $('.overlay').hide();
                    }
                } else {
                    if (typeof jsonResponse.error_field_name != 'undefined') {
                        //Do appropriate error action
                    } else {
                        alert(jsonResponse.message);
                    }
                    $('.overlay').hide();
                    event.preventDefault();
                    return false;
                }
            } else {
                /*alert('Something went wrong!');*/
                $('.overlay').hide();
                event.preventDefault();
            }
        };
        xhr.send(formData);
    })

    return false;
}
Ima
quelle
@ Bhargav: Erklärungen finden Sie im Blog-Beitrag: goo.gl/umgFFy . Wenn Sie noch Fragen haben, melden Sie sich bei mir. Danke
Ima
7

Ich habe diese in einem einfachen Code behandelt. Sie können eine Arbeits Demo Download von hier

Für Ihren Fall sind diese sehr gut möglich. Ich werde Ihnen Schritt für Schritt zeigen, wie Sie mit AJAX jquery eine Datei auf den Server hochladen können.

Zuerst erstellen wir eine HTML-Datei, um das folgende Formulardateielement wie unten gezeigt hinzuzufügen.

<form action="" id="formContent" method="post" enctype="multipart/form-data" >
         <input  type="file" name="file"  required id="upload">
         <button class="submitI" >Upload Image</button> 
</form>

Erstellen Sie zweitens eine jquery.js-Datei und fügen Sie den folgenden Code hinzu, um die Übermittlung unserer Datei an den Server zu handhaben

    $("#formContent").submit(function(e){
        e.preventDefault();

    var formdata = new FormData(this);

        $.ajax({
            url: "ajax_upload_image.php",
            type: "POST",
            data: formdata,
            mimeTypes:"multipart/form-data",
            contentType: false,
            cache: false,
            processData: false,
            success: function(){
                alert("file successfully submitted");
            },error: function(){
                alert("okey");
            }
         });
      });
    });

Da bist du fertig. Mehr sehen

Daniel Nyamasyo
quelle
7

Die Verwendung von FormData ist der richtige Weg, wie aus vielen Antworten hervorgeht. Hier ist ein bisschen Code, der für diesen Zweck hervorragend funktioniert. Ich stimme auch dem Kommentar zu, Ajax-Blöcke zu verschachteln, um komplexe Umstände zu vervollständigen. Durch Einschließen von e.PreventDefault (); Nach meiner Erfahrung ist der Code browserübergreifender kompatibel.

    $('#UploadB1').click(function(e){        
    e.preventDefault();

    if (!fileupload.valid()) {
        return false;            
    }

    var myformData = new FormData();        
    myformData.append('file', $('#uploadFile')[0].files[0]);

    $("#UpdateMessage5").html("Uploading file ....");
    $("#UpdateMessage5").css("background","url(../include/images/loaderIcon.gif) no-repeat right");

    myformData.append('mode', 'fileUpload');
    myformData.append('myid', $('#myid').val());
    myformData.append('type', $('#fileType').val());
    //formData.append('myfile', file, file.name); 

    $.ajax({
        url: 'include/fetch.php',
        method: 'post',
        processData: false,
        contentType: false,
        cache: false,
        data: myformData,
        enctype: 'multipart/form-data',
        success: function(response){
            $("#UpdateMessage5").html(response); //.delay(2000).hide(1); 
            $("#UpdateMessage5").css("background","");

            console.log("file successfully submitted");
        },error: function(){
            console.log("not okay");
        }
    });
});
Mike Volmar
quelle
Dies führt das Formular durch jquery validate aus ... if (! fileupload.valid ()) {return false; }
Mike Volmar
7

Mit reinem js ist es einfacher

async function saveFile(inp) 
{
    let formData = new FormData();           
    formData.append("file", inp.files[0]);
    await fetch('/upload/somedata', {method: "POST", body: formData});    
    alert('success');
}
<input type="file" onchange="saveFile(this)" >

  • Auf der Serverseite können Sie den ursprünglichen Dateinamen (und andere Informationen) lesen, die automatisch zur Anforderung hinzugefügt werden.
  • Sie müssen den Header "Content-Type" NICHT auf "Multipart / Formulardaten" setzen. Der Browser setzt ihn automatisch
  • Diese Lösung sollte auf allen gängigen Browsern funktionieren.

Hier ist ein weiter entwickeltes Snippet mit Fehlerbehandlung und zusätzlichem JSON-Senden

Kamil Kiełczewski
quelle
6

Ja, Sie können einfach Javascript verwenden, um die Datei abzurufen, und sicherstellen, dass Sie die Datei als Daten-URL lesen. Analysieren Sie das Material vor base64, um die Base 64-codierten Daten zu erhalten. Wenn Sie dann PHP oder eine andere Back-End-Sprache verwenden, können Sie die Base 64-Daten dekodieren und in einer Datei wie unten gezeigt speichern

Javascript:
var reader = new FileReader();
reader.onloadend = function ()
{
  dataToBeSent = reader.result.split("base64,")[1];
  $.post(url, {data:dataToBeSent});
}
reader.readAsDataURL(this.files[0]);


PHP:
    file_put_contents('my.pdf', base64_decode($_POST["data"]));

Natürlich möchten Sie wahrscheinlich eine Validierung durchführen, z. B. überprüfen, mit welchem ​​Dateityp Sie es zu tun haben und ähnliches, aber das ist die Idee.

Piacenti
quelle
file_put_contents ($ fname, file_get_contents ($ _ POST ['data'])); file_get_contents befasst sich mit der Dekodierung und Daten: // Header
Nande
5
<html>
    <head>
        <title>Ajax file upload</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
            $(document).ready(function (e) {
            $("#uploadimage").on('submit', (function(e) {
            e.preventDefault();
                    $.ajax({
                    url: "upload.php", // Url to which the request is send
                            type: "POST", // Type of request to be send, called as method
                            data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
                            contentType: false, // The content type used when sending data to the server.
                            cache: false, // To unable request pages to be cached
                            processData:false, // To send DOMDocument or non processed data file it is set to false
                            success: function(data)   // A function to be called if request succeeds
                            {
                            alert(data);
                            }
                    });
            }));
        </script>
    </head>
    <body>
        <div class="main">
            <h1>Ajax Image Upload</h1><br/>
            <hr>
            <form id="uploadimage" action="" method="post" enctype="multipart/form-data">
                <div id="image_preview"><img id="previewing" src="noimage.png" /></div>
                <hr id="line">
                <div id="selectImage">
                    <label>Select Your Image</label><br/>
                    <input type="file" name="file" id="file" required />
                    <input type="submit" value="Upload" class="submit" />
                </div>
            </form>
        </div>
    </body>
</html>
Nikit Barochiya
quelle
4

Sie können die Methode ajaxSubmit wie folgt verwenden :) Wenn Sie eine Datei auswählen, die auf den Server hochgeladen werden muss, müssen Sie das Formular an den Server senden :)

$(document).ready(function () {
    var options = {
    target: '#output',   // target element(s) to be updated with server response
    timeout: 30000,
    error: function (jqXHR, textStatus) {
            $('#output').html('have any error');
            return false;
        }
    },
    success: afterSuccess,  // post-submit callback
    resetForm: true
            // reset the form after successful submit
};

$('#idOfInputFile').on('change', function () {
    $('#idOfForm').ajaxSubmit(options);
    // always return false to prevent standard browser submit and page navigation
    return false;
});
});
Quy Le
quelle
2
Ich glaube, Sie sprechen über jquery Form Plugin. Es ist wirklich die beste Option hier, abgesehen von dem Mangel an Details in Ihrer Antwort.
Fotanus
@fotanus du hast recht! Dieses Skript muss das jquery form plugin verwenden, um die Verwendungsmethode ajaxSubmit zu senden, die im jquery form plugin definiert ist
Quy Le
4

Um eine Datei hochzuladen, die der Benutzer als Teil des Formulars mit jquery eingereicht hat, folgen Sie bitte dem folgenden Code:

var formData = new FormData();
formData.append("userfile", fileInputElement.files[0]);

Senden Sie dann das Formulardatenobjekt an den Server.

Wir können eine Datei oder einen Blob auch direkt an das FormData-Objekt anhängen.

data.append("myfile", myBlob, "filename.txt");
VISHNU Radhakrishnan
quelle
3

Wenn Sie Dateien mit AJAX hochladen möchten, finden Sie hier Code, den Sie zum Hochladen von Dateien verwenden können.

$(document).ready(function() {
    var options = { 
                beforeSubmit:  showRequest,
        success:       showResponse,
        dataType: 'json' 
        }; 
    $('body').delegate('#image','change', function(){
        $('#upload').ajaxForm(options).submit();        
    }); 
});     
function showRequest(formData, jqForm, options) { 
    $("#validation-errors").hide().empty();
    $("#output").css('display','none');
    return true; 
} 
function showResponse(response, statusText, xhr, $form)  { 
    if(response.success == false)
    {
        var arr = response.errors;
        $.each(arr, function(index, value)
        {
            if (value.length != 0)
            {
                $("#validation-errors").append('<div class="alert alert-error"><strong>'+ value +'</strong><div>');
            }
        });
        $("#validation-errors").show();
    } else {
         $("#output").html("<img src='"+response.file+"' />");
         $("#output").css('display','block');
    }
}

Hier ist der HTML-Code zum Hochladen der Datei

<form class="form-horizontal" id="upload" enctype="multipart/form-data" method="post" action="upload/image'" autocomplete="off">
    <input type="file" name="image" id="image" /> 
</form>
Nikunj K.
quelle
3

Um alle Formulareingaben einschließlich des Typs = "Datei" abzurufen, müssen Sie das FormData-Objekt verwenden . Sie können den formData-Inhalt im Debugger -> Netzwerk -> Header sehen, nachdem Sie das Formular gesendet haben .

var url = "YOUR_URL";

var form = $('#YOUR_FORM_ID')[0];
var formData = new FormData(form);


$.ajax(url, {
    method: 'post',
    processData: false,
    contentType: false,
    data: formData
}).done(function(data){
    if (data.success){ 
        alert("Files uploaded");
    } else {
        alert("Error while uploading the files");
    }
}).fail(function(data){
    console.log(data);
    alert("Error while uploading the files");
});
David
quelle
2
var dataform = new FormData($("#myform")[0]);
//console.log(dataform);
$.ajax({
    url: 'url',
    type: 'POST',
    data: dataform,
    async: false,
    success: function(res) {
        response data;
    },
    cache: false,
    contentType: false,
    processData: false
});
Jayesh Paunikar
quelle
5
Sie können Ihre Antwort verbessern, indem Sie einige Details hinzufügen
SR
1

Hier war eine Idee, an die ich dachte:

Have an iframe on page and have a referencer.

Haben Sie ein Formular, in das Sie das Element INPUT: File verschieben.

Form:  A processing page AND a target of the FRAME.

Das Ergebnis wird in den Frame gepostet, und dann können Sie die abgerufenen Daten einfach eine Ebene höher an das gewünschte Bild-Tag senden, mit folgenden Elementen:

data:image/png;base64,asdfasdfasdfasdfa

und die Seite wird geladen.

Ich glaube, es funktioniert bei mir und je nachdem, ob Sie in der Lage sind, Folgendes zu tun:

.aftersubmit(function(){
    stopPropigation()// or some other code which would prevent a refresh.
});
Fallenreaper
quelle
Ich sehe nicht, wie dies eine andere Antwort verbessert, die zuvor gegeben wurde. Auch ist es Ausbreitung nicht Propagierung! ;)
JDuarteDJ