如何使用AJAX上傳圖片？

我想用AJAX上傳圖片。當我這樣嘗試時，沒有任何反應。 AJAX不會撥打H_FileUpload.php。但$("#in_profile_img")部分確實有效。只有AJAX調用不起作用。爲什麼它不起作用？如何使用AJAX上傳圖片？

HTML：

<ul class="dropdown-menu fm-menu" role="menu"> 
    <li> 
     <a href="javascript:void(0)" onclick="$.change_profile_img()"> 
      <i class="fa fa-pencil"></i> Change 
     </a> 
    </li> 
    <li><a href="#"><i class="fa fa-trash-o"></i> Delete</a></li> 
</ul> 
<form id="form_profile_image" enctype="multipart/form-data" action="" method="POST"> 
    <input type="file" name="profile_img" id="in_profile_img" style="display:none;" /> 
</form><!-- profile image form -->

的JavaScript：

$.change_profile_img = function() { 
    $("#in_profile_img").click(); 
} 

$("#in_profile_img").on('change', (function(e) { 
    e.preventDefault; 
    var formData = new FormData(this); 

    $.ajax({ 
     url : "./handlers/H_FileUpload.php", 
     type : "POST", 
     data : formData, 
     cache : false, 
     contentType : false, 
     processType : false, 
     success : function(data) { 
      alert("Success"); 
      alert(data); 
     } 
    }); 
}));

PHP（H_FileUpload.php）：

<?php 
$name = $_FILES["profile_img"]["name"]; 
$result["ok"] = $name; 

echo json_encode($result); 

?>

來源

2015-10-30 Dauezevy

不知道爲什麼你的函數'點擊（）'，你的事件IM是'變化（）'？ – guradio

是的，單擊事件打開目錄和更改選擇圖像的事件，這不是問題或答案 – Dauezevy

我建議在選擇圖像後有一個上傳按鈕。爲什麼？因爲如果你繼續改變圖片，然後發射ajax上傳圖像到你的服務器，這不是一件好事。你還需要考慮，當用大文件大小觸發ajax時，用戶會突然改變圖像。你認爲會發生什麼？我很確定你沒有包括這種情況 –

改變這一行

var formData = new FormData(this);

到

var formData = new FormData($('#form_profile_image')[0]);

來源

2015-10-30 08:33:32 Azim

你可以這樣做：

var formData = new FormData($(this)); //$(this) is an object

或者你還可以增加更多的參數：

var formData = new FormData(); 
formData.append('image', $('input[type=file]')[0].files[0]);

請參閱：How to use FormData for ajax file upload

來源

2015-10-30 08:44:36

你有幾個錯誤，

使用FormData對象時選擇表單。
指定enctype。使用processData不是processType。

試試這個

$("#in_profile_img").on('change', function(e){ 

     e.preventDefault; 

     var formData = new FormData(document.getElementById("form_profile_image")); 

     $.ajax({ 
      url : "./handlers/H_FileUpload.php", 
      type : "POST", 
      data : formData, 
      cache : false, 
      enctype: 'multipart/form-data', 
      contentType : false, 
      processData : false, 
      success : function(data) { 
       alert("Success"); 
       alert(data); 
      } 
     }); 

    });

希望這將有助於

來源

2015-10-30 08:45:44

試試這個

在你的Ajax

var data = new FormData($('#posting_comment')[0]); 
    $.ajax({ 
        type:"POST", 
        url:"handlers/H_FileUpload.php", 
        data:data, 
        mimeType: "multipart/form-data", 
        contentType: false, 
        cache: false, 
        processData: false, 
        success:function(data) 
        { 
         //alert(data); 
          $(".image").html(data); 
        } 
      });

試試這個在你的PHP文件

$attachment_file=$_FILES["profile_img"]; 
$output_dir = "upload/"; 
$fileName = $_FILES["profile_img"]["name"]; 
move_uploaded_file($_FILES["profile_img"]["tmp_name"],$output_dir.$fileName); 
//echo "File uploaded successfully";

詳細閱讀本教程http://w3code.in/2015/10/how-to-upload-file-using-php-and-ajax-beginner-guide/

來源

2015-10-30 08:59:25 Ricky

您可以使用jQuery這將顯著簡化任務。進口的jQuery：https://code.jquery.com/jquery-3.2.1.min.js

var formData = $("#in_profile_img"); 
$.post('./handlers/H_FileUpload.php',{data:formData},function(e){ 
    alert("success"); 
    alert(e); 
});

來源

2017-07-08 16:22:11

如何使用AJAX上傳圖片？

回答

相關問題