2

私は、アップロードを行うphpを使用して、ajaxを介して画像をアップロードするフォームの作成に取り組んでいます。背景によっては、xhr.readyState と .Status が実行されているように見え、upload.php が実行されているように見える問題が発生しています (サファリでは、upload.php を実行して実行しているように見えます... ajax/ を使用していません)。 javascriptデバッガーが多すぎます）が、elseステートメントを実行し（ステータス2、次に4になるためだと思います）、xhr.responseTextを実行します。残念ながら、upload.php を正しく実行していないようです (これは、php の問題である可能性があります)。私は先に進み、phpをprintステートメントに置き換えました.alert（xhr.response.Text）を実行すると空のアラートステートメントが表示され、問題がどこにあるのか途方に暮れています。以下は、フォーム コード、ajax コード、および応答を取得しようとしている php コードです。

誰かが私が抱えている問題を見ていますか? 私は AJAX を初めて使用し、しばらくの間 PHP を使用していません。私は ajax/javascript スキルの向上に取り組んでいますが、私の見解では ajax が正しく取得されていないようです。

HTMLコード

> <form action="scripts/upload.php" method="post"
> enctype="multipart/form-data">
>       <label>Select a File to Upload</label> <input id="upload_file" type="file" name="upload_file" /> 
>       <input type="button" onclick="loadFile()" value="Upload"  />    </form>

JAVASCRIPT/AJAX コード

//LOAD IMAGES THROUGH JAVASCRIPT WINDOW.ONLOAD = INIT();

$(document).ready(function() {
  // Handler for .ready() called.

  $('.heading').click(function() {
      if($(this).find('li').is(':visible')) {   
        $(this).find('li').slideUp('slow'); 
    }else {
      $('.heading').find('li').slideUp('slow');
      $(this).find('li').slideDown('slow'); 
    }
  })
});

var xhr = createRequest();

function loadFile() {
//retrieve the FileList object from the referenced element ID
    var myFileList = document.getElementById('upload_file').files;

    //grab the first file object from the filelist
    var myFile = myFileList[0];

    //set some variables containing attributes of file
    var myFileName = myFile.name;
    var myFileSize = myFile.size;
    var myFileType = myFile.type;

    //alert the information gathered and if it is right
    alert("FileName: " + myFileName + "- FileSize: " + myFileSize + " - FileType: " + myFileType);

    //check above by alert if file size is below a certain MB and of image type JPEG, PNG, GIF

    //Let's upload the complete file object
    uploadFile(myFile);
}

function uploadFile(myFileObject) {
    // Open Our formData Object
    var formData = new FormData();

    // Append our file to the formData object
    // Notice the first argument "file" and keep it in mind
    formData.append('my_uploaded_file', myFileObject);

    // Create our XMLHttpRequest Object
    xhr.onreadystatechange = addImage;

    // Open our connection using the POST method
    xhr.open("POST", 'upload.php');
    //Send the proper header information along with the request
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    // Send the file
    xhr.send(formData);
}

function addImage() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        alert("WIN");
        alert(xhr.responseText);
    } else {
        alert("ERROR ERROR: " + xhr.status);
    }
}

AJAX リクエスト コード

function createRequest() {
  try {
    request = new XMLHttpRequest();
  } catch (tryMS) {
    try {
      request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (otherMS) {
      try {
        request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (failed) {
        request = null;
      }
    }
  } 
  return request;
}

PHP コード

<?php
    echo "hello";
?>

<?php
/*
define("UPLOAD_DIR", "../images");

if (!empty($_FILES["myFile"])) {
    $myFile = $_FILES["myFile"];

    if ($myFile["error"] !== UPLOAD_ERR_OK) {
        echo "<p>An error occurred.</p>";
        exit;
    }

    // ensure a safe filename
    $name = preg_replace("/[^A-Z0-9._-]/i", "_", $myFile["name"]);

    // don't overwrite an existing file
    $i = 0;
    $parts = pathinfo($name);
    while (file_exists(UPLOAD_DIR . $name)) {
        $i++;
        $name = $parts["filename"] . "-" . $i . "." . $parts["extension"];
    }

    // preserve file from temporary directory
    $success = move_uploaded_file($myFile["tmp_name"],
        UPLOAD_DIR . $name);
    if (!$success) { 
        echo "<p>Unable to save file.</p>";
        exit;
    }

    // set proper permissions on the new file
    chmod(UPLOAD_DIR . $name, 0644);
}
*/
?>

すべての PHP コードを貼り付けましたが、現在はエコー PHP コードを使用して応答を取得しているだけです。アップロードする php コードには (セキュリティ チェック以外に) 多くのことがあると確信しています。しかし、皆さんが私を正しい方向に向けたり、ajax呼び出しが機能しているかどうか、または機能していない理由を理解するのを手伝ってくれれば. 個人的には、応答テキストがないだけだと思います。実行する独自の PHP コードを作成するために Ajax を使用したのはこれが初めてです。

4

1 に答える 1

0

フォームのアクション属性にはscripts/upload.phpがありますが、ajax URLはupload.phpです。

コンテンツ タイプ ヘッダーを設定しないでください。formdataオブジェクトを に渡すと、自動的に multipart/form-data に設定されますXMLHttpRequest.send。

FormData オブジェクトを使用すると、一連のキーと値のペアをコンパイルして、XMLHttpRequest を使用して送信できます。主にフォーム データの送信に使用することを目的としていますが、キー付きデータを送信するためにフォームとは別に使用できます。送信されるデータは、フォームのエンコーディング タイプが"multipart/form-data"に設定されている場合に、フォームの submit() メソッドがデータを送信するために使用するのと同じ形式です。

于 2013-01-13T20:36:24.873 に答える