Ajax-Bild hochladen

Lesezeit: 2 Minuten

Ich versuche, ein Bild mit Ajax bei der Änderung des Dateibildnamens hochzuladen, aber ich kann das nicht bekommen $_FILES["InputUploadFileImage"]["tmp_name"]; auf der Serverseite mein Code.

JQuery-Code

  $('#InputUploadFileImage').change(function() {
        var FilePath = $('#InputUploadFileImage').val();
        var FileSize = this.files[0].size;

        $.ajax({
            type: "POST",
            async: true,
            dataType: "json",
            url: ajaxurl,

            data: ({
                type: "POST",
                action: 'Ajax_ChangingProfileImage',
                FilePath: FilePath,
                FileSize: FileSize
            }),
            success: function (response) {
                if (response.Message === 'ImageSuccessfullyUploaded') {
                    alert('Image Successfully Uploaded.');
                    $('#imgUserImage').image_src = FilePath;
                    console.log(response.FilePath);
                } else {
                    alert('Image was not uploaded successfully.');
                    $('#imgUserImage').image_src = FilePath;
                    console.log(response.FilePath);
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log(jqXHR);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });
    });

PHP-Code

function Ajax_ChangingProfileImage() {

    $FileTmpPath = $_FILES["InputUploadFileImage"]["tmp_name"];
    $FileSize = $_POST['FileSize'];
    $FilePath = $_SERVER['DOCUMENT_ROOT'] . "restronaut/wp-content/uploads/UsersImages/1.jpg";
    $IsUploaded = move_uploaded_file($FileTmpPath ,$FilePath);

    if ($IsUploaded) {
        $response['Message'] = 'ImageSuccessfullyUploaded';
        $response['FilePath'] = $FilePath;

    } else {
        $response['Message'] = 'ImageNotSuccessfullyUploaded';
        $response['FilePath'] = $FilePath;
    }

    header('Content-Type: application/json');
    echo json_encode($response);
    die();
}

bitte um hilfe und vielen dank im voraus..

Ajax Bild hochladen
Bhavin Solanki

Sie müssen verwenden neue formData() um ein Bild mit einem Ajax-Aufruf zu senden. Dies ist gleichbedeutend mit dem Setzen eines Enctypes in einer regulären Form (ohne Ajax).

für weitere Informationen zum formData-Objekt Hier ist ein MDN-Link für Sie.

JQuery-Code

$('#InputUploadFileImage').change(function() {
    /*var FilePath = this.files[0];
    var FileSize = this.files[0].size;
     var file = this.files[0];
    var name = FilePath.name;
    var type = FilePath.type;*/
    var formData = new FormData($('*formId*')[0]);
    $.ajax({
        type: "POST",
        async: true,
        dataType: "json",
        url: ajaxurl,

        data: ({
            type: "POST",
            action: 'Ajax_ChangingProfileImage',
            formData : formData 
        }),
        success: function (response) {
            if (response.Message === 'ImageSuccessfullyUploaded') {
                alert('Image Successfully Uploaded.');
                $('#imgUserImage').image_src = FilePath;
                console.log(response.FilePath);
            } else {
                alert('Image was not uploaded successfully.');
                $('#imgUserImage').image_src = FilePath;
                console.log(response.FilePath);
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(jqXHR);
            console.log(textStatus);
            console.log(errorThrown);
        }
    });
});

PHP-Code

print_r($_FILES);

  • hallo @Bhavin ich habe es so versucht var formData = new FormData($(‘#FormUserInfo’)[0]); console.log(formData), aber die formData wurde leer zurückgegeben

    – Fadi

    20. Juli ’15 um 20:05


  • @Fadi sind Sie sicher, dass der von Ihnen übergebene Formularknoten (der vom jquery-Objekt zurückgegeben wird) durch [0] existiert?

    – SidOfc

    22. Juli ’15 um 7:49

  • @Fadi hast du den Ajax-Aufruf print_r( $_FILES) eingecheckt?

    – Bhavin Solanki

    22. Juli ’15 um 8:51

1641662763 268 Ajax Bild hochladen
kieranpotts

Leider können Sie den Wert einer Datei-Upload-Box nicht über JavaScript abrufen. Daher können Sie einen Datei-Upload über Ajax nicht auf die gleiche Weise wie Standard-Textdaten senden.

Stattdessen müssen Sie JavaScript verwenden FormData Objekt, um die Datei in ein zu packen multipart/form-data Datenobjekt posten. Bitte beachten Sie die akzeptierte Antwort in dieser StackOverflow-Frage:

Datei mit Ajax XmlHttpRequest hochladen

Seien Sie sich bewusst, dass die FormData API wird von Internet Explorer 9 nicht unterstützt.

.

185100cookie-checkAjax-Bild hochladen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy