AJAX / Javascript与上传PHP问题

I have been working on making a form that uploads an image through ajax with php doing the upload. For some background I am having an issue where the xhr.readyState and .Status seem to run and upload.php seems to run (in safari it goes and runs upload.php it seems to me... I have not used the ajax/javascript debugger too much) but it will run my else statement (i believe becuase it goes to status 2 and then 4) and then run xhr.responseText. Unfortunately it does not seem to run the upload.php right (which may be a php problem). I went ahead and replaced the php with a print statement which when running alert(xhr.response.Text) comes up with a blank alert statement and I am at a loss where the issue is. Below is my form code, ajax code and the php code i'm trying to get a response from.

Does anyone see the issue I am having? I am new to AJAX and have not worked with PHP in some time. I am working on upping my ajax/javascript skills but from my view it does not seem to be getting the ajax correctly.


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



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

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

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

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

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


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;


    echo "hello";

define("UPLOAD_DIR", "../images");

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

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

    // 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)) {
        $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>";

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

I pasted all my PHP code although right now i'm just working with the echo PHP code to get a response, I am sure there are many things (besides security checking) with my upload php code. But if you guys can point me in the right direction or help me figure out if or why not the ajax call is working. I believe it is personally just no responseText. This is the first time i've worked with Ajax creating my own PHP code to be run.

doupuchao4256 您好,感谢您提供表单操作属性。我完全错过了这个并且很尴尬哈哈!现在responseText里面有PHP代码。
7 年多之前 回复
duanhuang4841 在你的表单的action属性中你有scripts/upload.php但是ajaxurl是upload.php,这可能是问题吗?
7 年多之前 回复
doumu1936 哇,这是一个很长的问题!
7 年多之前 回复


在表单的action属性中,你有scripts / upload.php,但是ajax url是upload.php。</ p>
\ n

不要设置内容类型标题,当您传递 formdata 对象到 XMLHttpRequest.send </ code>。</ p>

FormData对象让我们 编译一组键/值对以使用XMLHttpRequest发送。 它主要用于发送表单数据,但可以独立于表单使用,以便传输密钥数据。 如果表单的编码类型设置为“multipart / form-data”</ b>,则传输的数据格式与表单的submit()方法用于发送数据的格式相同。</ p>
</ blockquote>
</ div>



In your form's action attribute you have scripts/upload.php but the ajax url is upload.php.

Do not set the content type header, it will be set automatically to multipart/form-data when you pass a formdata object to XMLHttpRequest.send .

The FormData object lets you compile a set of key/value pairs to send using XMLHttpRequest. Its primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to "multipart/form-data".

dstjh46606 谢谢你,我将不得不更多地了解标题!
7 年多之前 回复
Csdn user default icon