Frage wie man den Datei-Upload mit jquery serialization macht


Also habe ich ein Formular und ich übergebe das Formular durch Ajax mit Hilfe der Jquery-Serialisierungsfunktion

        serialized = $(Forms).serialize();

        $.ajax({

        type        : "POST",
        cache   : false,
        url     : "blah",
        data        : serialized,
        success: function(data) {

        }

aber was ist, wenn die Form eine hat? <input type="file"> Feld .... Wie übertrage ich die Datei in das Formular mit dieser Ajax-Serialisierungsmethode ... Drucken $ _FILES gibt nichts aus


60
2017-12-28 09:41


Ursprung


Antworten:


Eine Datei kann nicht mit AJAX hochgeladen werden, weil Sie nicht auf den Inhalt einer Datei zugreifen können, die auf dem Client-Computer gespeichert ist, und sie in der Anfrage mit Javascript senden. Eine der Techniken, um dies zu erreichen, ist die Verwendung versteckter Iframes. Es ist schön jquery form plugin was Ihnen erlaubt, Ihre Formulare und es zu AJAXify unterstützt Dateiuploads auch. Mit diesem Plugin wird Ihr Code einfach so aussehen:

$(function() {
    $('#ifoftheform').ajaxForm(function(result) {
        alert('the form was successfully processed');
    });
});

Das Plugin kümmert sich automatisch um das Abonnieren des submit Ereignis des Formulars, Abbrechen der Standardübergabe, Serialisierung der Werte, Verwendung der richtigen Methode und Handhabung von Datei-Upload-Feldern, ...


43
2017-12-28 09:43



Sie können jetzt Dateien mit Ajax hochladen!

Beispiele:

https://stackoverflow.com/a/8758614/1072492

http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/


37
2018-06-05 04:44



Es funktioniert für jede Art von Formular

$(document).on("submit", "form", function(event)
{
    event.preventDefault();

    var url=$(this).attr("action");
    $.ajax({
        url: url,
        type: $(this).attr("method"),
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status)
        {

        },
        error: function (xhr, desc, err)
        {


        }
    });        

});

20
2018-02-03 22:07



Sie können Dateien über AJAX mithilfe der FormData-Methode hochladen. Obwohl IE7, 8 und 9 die FormData-Funktionalität nicht unterstützen.

$.ajax({
    url: "ajax.php", 
    type: "POST",             
    data: new FormData('form'),
    contentType: false,       
    cache: false,             
    processData:false, 
    success: function(data) {
        $("#response").html(data);
    }
});

8
2018-01-30 11:02



   var form = $('#job-request-form')[0];
        var formData = new FormData(form);
        event.preventDefault();
        $.ajax({
            url: "/send_resume/", // the endpoint
            type: "POST", // http method
            processData: false,
            contentType: false,
            data: formData,

Es hat für mich funktioniert! Setzen Sie einfach processData und contentType False.


4
2018-01-20 13:28



HTML

<form name="my_form" id="my_form" accept-charset="multipart/form-data" onsubmit="return false">
    <input id="name" name="name" placeholder="Enter Name" type="text" value="">
    <textarea id="detail" name="detail" placeholder="Enter Detail"></textarea>
    <select name="gender" id="gender">
        <option value="male" selected="selected">Male</option>
        <option value="female">Female</option>
    </select>
    <input type="file" id="my_images" name="my_images" multiple="" accept="image/x-png,image/gif,image/jpeg"/>
</form>

JavaScript

var data = new FormData();

//Form data
var form_data = $('#my_form').serializeArray();
$.each(form_data, function (key, input) {
    data.append(input.name, input.value);
});

//File data
var file_data = $('input[name="my_images"]')[0].files;
for (var i = 0; i < file_data.length; i++) {
    data.append("my_images[]", file_data[i]);
}

//Custom data
data.append('key', 'value');

$.ajax({
    url: "URL",
    method: "post",
    processData: false,
    contentType: false,
    data: data,
    success: function (data) {
        //success
    },
    error: function (e) {
        //error
    }
});

PHP

<?php
    echo '<pre>';
    print_r($_POST);
    print_r($_FILES);
    echo '</pre>';
    die();
?>

2
2018-01-22 11:47



HTML5 führt ein FormData Klasse, die zum Hochladen von Dateien mit Ajax verwendet werden kann.

Die Unterstützung von FormData beginnt mit den folgenden Desktop-Browserversionen. IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

https://developer.mozilla.org/en/docs/Web/API/FormData/FormData


0
2017-10-12 06:28



hmmmm ich denke, es gibt einen sehr effizienten Weg, es speziell für Leute zu machen, die auf alle Browser und nicht nur zielen wollen Formulardaten unterstützter Browser

die Idee, sich versteckt zu haben IFRAME auf der Seite und das normale Senden für das From-in- IFrame-Beispiel

<FORM action='save_upload.php' method=post
   enctype='multipart/form-data' target=hidden_upload>
   <DIV><input
      type=file name='upload_scn' class=file_upload></DIV>
   <INPUT
      type=submit name=submit value=Upload /> <IFRAME id=hidden_upload
      name=hidden_upload src='' onLoad='uploadDone("hidden_upload")'
      style='width:0;height:0;border:0px solid #fff'></IFRAME> 
</FORM>

Am wichtigsten ist es, ein Ziel der Form zum versteckten Iframe zu machen ICH WÜRDE oder Name und enctype Multipart / Formulardaten um die Annahme von Fotos zu erlauben

Javascript Seite

function getFrameByName(name) {
    for (var i = 0; i < frames.length; i++)
        if (frames[i].name == name)
            return frames[i];

    return null;
}

function uploadDone(name) {
    var frame = getFrameByName(name);
    if (frame) {
        ret = frame.document.getElementsByTagName("body")[0].innerHTML;

        if (ret.length) {
            var json = JSON.parse(ret);
         // do what ever you want 
        }
    }
}

Serverseite Beispiel PHP

<?php
  $target_filepath = "/tmp/" . basename($_FILES['upload_scn']['name']);

  if (move_uploaded_file($_FILES['upload_scn']['tmp_name'], $target_filepath)) {
    $result = ....
  }

echo json_encode($result);
?>

0
2017-07-31 15:17