jQuery Ajax File Upload

Kann ich mit den folgenden jQuery-code, um eine Datei-upload mit der post-Methode ein Ajax-request ?

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

Wenn es möglich ist, benötige ich zum füllen der "Daten" - Teil? Ist es der richtige Weg? Ich habe nur erlaubt, die Datei auf der server-Seite.

Habe ich schon Googeln um, aber was ich gefunden habe, war ein plugin, während in meinem plan, den ich nicht wollen, es zu benutzen. Zumindest für den moment.

Ajax unterstützt keine Datei-uploads, die Sie verwenden sollten, anstatt iframe
Verwandte Frage: stackoverflow.com/questions/6974684/...
Verwandte: stackoverflow.com/questions/166221/...
Verwandte: aufzugeben.ie/notebook/einfache Datei-uploads-using-jquery-ajax

InformationsquelleAutor Willy | 2010-02-23

557

Datei-upload ist ~~nicht~~ möglich durch ajax.
Sie können die Datei hochladen, ohne erfrischende Seite mit IFrame.
Sie können überprüfen, weitere Details hier

UPDATE:

Mit XHR2, Datei-upload per AJAX unterstützt wird. E. g. durch FormData Objekt, aber leider ist es nicht von allen unterstützt/alte Browser.

FormData-support beginnt ab der folgenden desktop-Browser-Versionen.
IE 10+,
Firefox 4.0+,
Chrome 7+,
Safari 5+,
Opera 12+

Für mehr Details, siehe MDN link

Hier ist eine Liste der speziellen Browsern, die nicht unterstützt werden: caniuse.com/#search=FormData Auch das habe ich nicht getestet, aber hier ist ein polyfill für FormData gist.github.com/3120320
Speziell, IE < 10 nicht, für diejenigen, die zu faul zum Lesen den link.
Nein, wir müssen nicht warten, dass lange nicht mehr, weil alle nur IE hat ein 22% weltweiten Marktanteilen und 27% in den USA und schnell fallen. Die Chancen sind es ist, die Menschen über 70 Jahre alt. Also lieber als der IE diktieren, was die Entwickler zu tun haben, DH entweder auf Vordermann bringen oder sich aus dem Rennen.
Die meisten IE Nutzer sind office Mitarbeiter, die nicht die Wahl haben auf welchen browser zu verwenden, da der unternehmensinternen Richtlinien. Ich glaube nicht, dass Alter hat viel zu tun mit es. Ich vermute, die meisten Leute > 70 bekommen Ihre Nachkommen installieren Sie Chrome oder FF, stattdessen 🙂
Diesen link hat mir wirklich geholfen in das Verständnis das absolute minimum. Ich habe nicht verwenden ein xhr-Anfrage. Wenn Sie ajax verwenden, stellen Sie sicher, dass die enctype zu "form/multipart"!

InformationsquelleAutor Adeel

284

Iframes ist nicht mehr erforderlich, für das hochladen von Dateien durch ajax. Ich habe vor kurzem es getan habe. Schauen Sie sich diese Seiten:

Mit HTML5 Datei-Upload mit AJAX und jQuery

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

Aktualisiert die Antwort und gereinigt. Verwenden Sie die getSize-Funktion zu überprüfen, der Größe und der Nutzung der getType-Funktion zum überprüfen von Typen.
Hinzugefügt progressbar-html-und css-code.

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 + "%");
};

Wie zu verwenden 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();
});

Progressbar html-code

<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;
}

Sie können mehr oder weniger kopieren Sie den code sofort ab und verwenden Sie es. Ändern Sie einfach einige-id-Namen und Klassennamen. Alle customation auf Ihrer eigenen.
Beachten Sie, dass myXhr scheint zu sein, Globale wie name, Größe und Typ. Auch ist es besser zu nutzen "beforeSend" als Ergänzung zu den bereits erstellten XMLHttpRequest-Objekt, anstatt mit "xhr" zu erstellen, dann ändern Sie es.
Nicht von IE9 unterstützt: caniuse.com/#search=xhr
Ich glaube nicht, dass wir verwenden können, wie @Ziinloader. Sie verwenden einige lokale Methode, die nicht im Lieferumfang enthalten: writer(catchFile). Was ist writer()?
Was ist, wenn die Daten auch enthält paar Felder zusammen mit Datei hochladen?

InformationsquelleAutor Ziinloader

171

Ajax post-und upload-Datei ist möglich. Ich bin mit jQuery $.ajax - Funktion zum laden meiner Dateien. Ich habe versucht, die Verwendung der XHR-Objekt, konnte aber keine Ergebnisse auf der server-Seite mit PHP.

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 leer ist oder aus (serialisiert? - $('#yourForm').serialize()) bestehenden form, und befestigen Sie dann die input-Datei.

Hier gibt es mehr Informationen:
- Wie zum hochladen einer Datei mithilfe von jQuery.ajax und FormData
- Hochladen von Dateien über das jQuery-Objekt FormData ist vorhanden, und keine Datei mit dem Namen, GET-Anforderung

Für den PHP-Prozess, den Sie verwenden können, so etwas wie dieses:

//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
            ));
}

Was jquery Bibliothek muss ich die Referenz auf diesen code ausführen?
Die Antwort war geschrieben in 2014. Die version von JQuery war 1.10. Ich habe nicht versucht, mit den neueren Versionen.
formData.append('file', $('#file')[0].files[0]); zurück undefined und console.log(formData) hat nichts außer _proto_
Nicht unterstützt von IE 9, falls geklebt wird, in die gleiche Hölle wie ich
Ich habe diese arbeiten...kneif mich, ich bin auf jQuery Ajax file 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);            }     });

InformationsquelleAutor pedrozopayares

Ich bin ziemlich spät dafür, aber ich war auf der Suche für eine ajax-basierte Bild-Upload-Lösung und die Antwort, die ich suchte war ein bisschen verstreut in diesem Beitrag. Die Lösung ließ ich mich auf beteiligt das FormData-Objekt. Ich stellte eine einfache form der code den ich zusammen gestellt habe. Sie können sehen, es veranschaulicht, wie hinzufügen eines benutzerdefinierten Felds auf dem Formular mit fd.append() als auch wie zu handle-response-Daten, wenn der ajax request fertig ist.

Upload html:

<!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>

Den Fall, Sie sind mit php zu arbeiten, hier ist eine Möglichkeit zum verarbeiten der upload beinhaltet die Nutzung der beiden benutzerdefinierten Felder gezeigt, in der oben genannten html.

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";
}
?>

ich bin immer Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, warum ist das so sir ich kopieren fügen Sie den code ein, als es ist
wenn du Google deine Fehlermeldung, dies ist das erste Ergebnis: stackoverflow.com/questions/10752055/... Werden Sie den Zugriff auf Ihre web-Seiten lokal durch file:// werden, anstatt ein web-server? Nebenbei, es ist nicht best practice, einfach kopieren-und-einfügen von code-blind, ohne zuerst zu verstehen. Ich würde Ihnen empfehlen, gehen Sie durch den code Zeile für Zeile zu verstehen, was passiert ist, bevor Sie den code verwenden.
danke für die Klärung ein paar Dinge, die ich habe gehen durch, die es Zeile für Zeile und ich nicht wirklich verstehe, so viel ist mir die Frage so, dass jemand vielleicht klären sich meine Zweifel. Ich bin mit lokalen durch xampp um genau zu sein. Kann ich eine Frage stellen, die Sie vielleicht klären können?
Wiederbelebung : ich weiß, dass es zu spät für die Antwort.. Du hast ein cross-origin-Fehler, da öffneten Sie die html-Datei als Datei, als läuft es aus dem server.
ich appreaciate die Antwort wie schlagen Sie vor, ich Mach es, es richtig zu machen?

InformationsquelleAutor lee8oi

31

Einem AJAX-upload ist in der Tat möglich mit XMLHttpRequest(). Keine iframes erforderlich. Upload-Fortschritt angezeigt werden können.

Für details siehe: Antwort https://stackoverflow.com/a/4943774/873282 zu Frage jQuery Upload Progress und AJAX Datei upload.

Leider IE < 10 nicht unterstützen.

InformationsquelleAutor koppor

In Fall, dass Sie wollen, tun Sie es so:

$.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.

Wo ist der upload-Methode $ Objekt, der oben genannte link ist nicht vorhanden
github.com/lgersman/jquery.orangevolt-ampere/blob/master/src/...
Vielen Dank für den Beitrag Ihre Antwort! Bitte Lesen Sie die FAQ on Self-Promotion vorsichtig. Beachten Sie auch, dass es erforderlich, die Sie der post einen disclaimer jedes mal, wenn Sie einen link zu Ihrer eigenen Website/Produkt.

InformationsquelleAutor lgersman

13
- Verwenden Sie einen versteckten iframe und Ihre form das Ziel, die iframe-name. Auf diese Weise, wenn das Formular abgeschickt wird, wird nur der iframe aktualisiert wird.
- Haben einen event-handler registriert, der für das iframe load-Ereignis zu analysieren, die Antwort.
Mehr details auf meinem blog-post: http://blog.manki.in/2011/08/ajax-fie-upload.html.

Vermeiden Sie iframes, wo möglich
was ist Ihr Anliegen?

InformationsquelleAutor Manki

$("#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;    
});

edit: Hinweis contentype-und Prozessdaten
Sie können einfach verwenden Sie diese, um Dateien hochladen per Ajax...... submit input nicht äußere form element 🙂

Mit dieser Methode können Sie die post-Formular, jedoch nicht mit "Datei" - Typ-Felder. Diese Frage ist speziell über den Datei-upload.

InformationsquelleAutor Gvice

Hier ist, wie ich diese Arbeit:

HTML

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

$('#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

}

Was half das beste für mich war, dass die $('#file')[0].files[0] ist eine Art von seltsam JS-workaround, ohne dass eine ordnungsgemäße <form>

InformationsquelleAutor М.Б.

Implementierte ich ein multiple-Datei wählen Sie mit instant preview und upload nach dem entfernen unerwünschter Dateien aus dem Vorschau per ajax.

Ausführliche Dokumentation kann hier gefunden werden: 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;
}

Bitte sehen Sie sich den blog-post für Erklärungen: goo.gl/umgFFy. Wenn Sie noch irgendeine Frage haben, Holen Sie sich zurück zu mir, Danke

InformationsquelleAutor Ima

Habe ich bearbeitet diese in einem einfachen code. Sie können herunterladen eine funktionierende demo von hier

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

Zuerst wollen wir uns eine HTML-Datei erstellen, fügen Sie die folgende Datei Formular-element wie unten dargestellt.

<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>

Zweitens erstellen Sie eine jquery.js Datei und fügen Sie folgenden code zum behandeln von unserem Datei-übermittlung an den server

    $("#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 Sie fertig sind . mehr Anzeigen

InformationsquelleAutor Daniel Nyamasyo

Mit FormData ist der Weg zu gehen, wie durch viele Antworten. hier ist ein Stück code, das funktioniert Super für diesen Zweck. Ich Stimme auch mit der Kommentar-Verschachtelung ajax-Blöcken zum ausführen komplexer Umstände. Indem e.PreventDefault(); in meiner Erfahrung ist der code mehr cross-browser-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");
        }
    });
});

dieser führt die form thru jquery Validierung ... if (!fileupload.valid()) { return false; }

InformationsquelleAutor Mike Volmar

5

Ja, Sie können, verwenden Sie einfach die javascript-Datei zu erhalten, machen Sie sicher, Lesen Sie die Datei als data-URL. Analysiert wird das Zeug vor der base64, um tatsächlich Holen Sie sich die base-64-codierte Daten und dann, wenn Sie mit php oder wirklich alle back-end-Sprache Dekodieren der base-64 Daten und speichern Sie in eine Datei wie unten gezeigt
```
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 werden Sie wahrscheinlich wollen, zu tun, einige Validierung zu prüfen, welche Datei-Typ Sie sind den Umgang mit und sowas, aber das ist die Idee.

file_put_contents($fname, file_get_contents($_POST['Daten'])); file_get_contents beschäftigt sich mit der Entschlüsselung und Daten:// header

InformationsquelleAutor Piacenti

<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>

InformationsquelleAutor Nikit Barochiya

Können Sie Methode ajaxSubmit wie Folgen 🙂
wenn Sie eine Datei auswählen, müssen auf server hochladen, Formular senden an server 🙂

$(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;
});
});

Ich glaube, Sie reden über jquery form plugin. Es ist wirklich die beste option hier, abgesehen von dem Mangel an details in deine Antwort.
du hast Recht! das Skript muss unter Verwendung der jquery-form-plugin zu senden, verwenden Sie die Methode ajaxSubmit, die definieren, in jquery form plugin

InformationsquelleAutor Quy Le

4

hochladen einer Datei, die übermittelt wird, durch den Benutzer als Teil der form unter Verwendung von jquery, Folgen Sie bitte den folgenden code :
```
var formData = new FormData();
formData.append("userfile", fileInputElement.files[0]);
```
Dann senden Sie das Formular-Daten-Objekt zum server.

Wir können auch hinzufügen einer Datei oder Blob-direkt an das FormData-Objekt.
```
data.append("myfile", myBlob, "filename.txt");
```
InformationsquelleAutor VISHNU Radhakrishnan

Wenn Sie möchten, um die upload-Datei per AJAX hier ist der code, die Sie verwenden können für den Datei-Upload.

$(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 für die Datei Hochladen

<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>

InformationsquelleAutor Nikunj K.

Bekommen alle Ihre Formular-Eingaben, einschließlich der type="file", die Sie verwenden müssen FormData-Objekt.
Sie werden in der Lage, um zu sehen, das formData-Inhalte in der debugger -> Netzwerk ->Kopf - nachdem Sie das Formular abschicken.

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");
});

InformationsquelleAutor David

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
});

Sie können verbessern Sie Ihre Antwort, indem Sie einige details

InformationsquelleAutor Jayesh Paunikar

2019 update:

html

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

$(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']

Wie dow dadurch verbessert sich die Antworten bereits gegeben? Auch diese Antwort erwähnt views.py Datei, die Django und hat nichts mit der Frage zu tun.
Weil das Problem manifestiert sich vergleichsweise zwar mit Django, und wenn Sie mit Django, gibt es nicht viel Richtung in Bezug auf die Lösung. Ich dachte, ich würde bieten pro-aktive Hilfe nur falls jemand hier ankommt, wie ich es Tat in die Zukunft. Nachdem ein harter Tag?

InformationsquelleAutor Jay

1

Hier war eine Idee, die ich dachte, war:
```
Have an iframe on page and have a referencer.
```
Habe ein Formular, in dem Sie bewegen Sie den EINGANG:Datei-element zu.
```
Form:  A processing page AND a target of the FRAME.
```
Das Ergebnis veröffentlichen wird, um den Rahmen, und dann können Sie nur senden Sie die abgerufenen Daten auf ein Niveau der Bild-tag, Sie wollen mit so etwas wie:
```
data:image/png;base64,asdfasdfasdfasdfa
```
und die Seite geladen.

Ich glaube, es funktioniert für mich, und je nachdem, wo Sie in der Lage sein könnte, etwas zu tun:
```
.aftersubmit(function(){
    stopPropigation()//or some other code which would prevent a refresh.
});
```
Ich sehe nicht, wie diese verbessert jede andere Antwort vor. Auch ist es Ausbreitung nicht propigation! 😉

InformationsquelleAutor Fallenreaper

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.