it-swarm.com.de

wie man einen Datei-Upload mit Jquery-Serialisierung durchführt

Ich habe also ein Formular und sende das Formular über Ajax mit der Jquery-Serialisierungsfunktion 

        serialized = $(Forms).serialize();

        $.ajax({

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

        }

aber was dann, wenn das Formular ein <input type="file">-Feld hat .... wie gebe ich die Datei mit dieser Ajax-Serialisierungsmethode in das Formular ein?

61
kamikaze_pilot

Eine Datei kann nicht mit AJAX hochgeladen werden, da Sie nicht auf den Inhalt einer auf dem Client-Computer gespeicherten Datei zugreifen und sie in der Anforderung mit Javascript senden können. Eine der Techniken, um dies zu erreichen, ist die Verwendung von verborgenen Iframes. Es gibt ein Nice Jquery-Formular-Plugin , mit dem Sie Ihre Formulare AJAXifizieren können und das - Datei-Upload unterstützt . Wenn Sie also dieses Plugin verwenden, sieht Ihr Code einfach so aus:

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

Das Plugin kümmert sich automatisch um das Abonnieren des submit-Ereignisses des Formulars, das Abbrechen der Standardübermittlung, das Serialisieren der Werte, die Verwendung der richtigen Methode und die Verarbeitung von Datei-Upload-Feldern, ...

43
Darin Dimitrov
40
Dan

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


        }
    });        

});
21
Shaiful Islam
   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 auf False.

8
Maryam Zakani

Sie können Dateien über AJAX hochladen, indem Sie die FormData-Methode verwenden. 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
Rossco

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();
?>
5
Renish Patel

hmmmm Ich denke, es gibt eine sehr effiziente Methode, um es speziell für Leute zu machen, die alle Browser anvisieren möchten und nicht nur FormData Browser 

die Idee,IFRAMEauf der Seite zu verbergen und das Senden in das From inside IFrame-Beispiel normal zu machen 

<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 form-Ziel zum versteckten iframeIDoder name und enctype multipart/form-data zu machen, um Fotos zu akzeptieren

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

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

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

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

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

0
Rahul Patel
$(document).on('click', '#submitBtn', function(e){
e.preventDefault();
e.stopImmediatePropagation();
var form = $("#myForm").closest("form");
var formData = new FormData(form[0]);
$.ajax({
    type: "POST",
    data: formData,
    dataType: "json",
    url: form.attr('action'),
    processData: false,
    contentType: false,
    success: function(data) {
         alert('Sucess! Form data posted with file type of input also!');
    }
)};});

Durch Verwendung von new FormData() und Einstellung von processData: false, contentType:false in ajax war das Senden des Formulars mit Dateieingabe für mich erfolgreich

Mit obigem Code kann ich Formulardaten mit Dateifeld auch über Ajax übermitteln

0