阿賈克斯上傳圖片

我試圖上傳圖片使用阿賈克斯文件圖像名稱更改，但我不能在服務器端$_FILES["InputUploadFileImage"]["tmp_name"];我的代碼。阿賈克斯上傳圖片

jQuery代碼

$('#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代碼

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(); 
}

請任何幫助，並提前許多感謝..

來源

2015-07-20 Fadi

您需要使用新FORMDATA（）使用ajax調用發送圖像。這是等於以瞭解更多信息的FORMDATA對象上here's a MDN link for you.

jQuery代碼

$('#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代碼以規則形式設置的加密類型（無AJAX）

print_r($_FILES);

來源

2015-07-20 19:54:26

hello @Bhavin我試過像這樣var formData = new FormData（$（'＃FormUserInfo'）[0]）; console.log（formData），但formData返回爲空 – Fadi

@Fadi你確定你傳遞的表單節點（它是由jquery對象返回的）通過'[0]'存在嗎？ – SidOfc

@Fadi你檢查ajax調用print_r（$ _FILES）;？ –

恐怕你不能fe通過JavaScript提供文件上傳框的值。因此，您不能像使用標準文本數據一樣通過Ajax提交文件上傳。

相反，您必須使用JavaScript的FormData對象將文件包裝到multipart/form-data發佈數據對象中。請參閱接受的答案在這個StackOverflow的問題：

Upload File With Ajax XmlHttpRequest

請注意，FormData API不是由Internet Explorer 9 - 支持。

來源

2015-07-20 19:55:16 kieranpotts

阿賈克斯上傳圖片

回答

相關問題