JS - 使用Ajax獲取文件名

Question

我想使用Ajax獲取文件的擴展名和名稱。

我的AJAX代碼如下所示：

$.ajax({ 
    type: "POST", 
    url: url, 
    data: $("#updateMember").serialize(), 
    mimeType: "multipart/form-data", 
    contentType: false, 
    cache: false, 
    processData: false, 
    success: function (data) { 
     alert(data); 
    } 
}); 

在PHP我有這個

$imageFileType = pathinfo($_FILES["input9"]["name"], PATHINFO_EXTENSION); 
echo $imageFileType; 

和我的HTML是

<form method="post" enctype="multipart/form-data" id="updateMember"> 
    <input id="input-9" name="input9" type="file" class="file file-loading" data-allowed-file-extensions='["png", "jpg", "gif", "jpeg"]' style="top: 0px;"> 
    <li class="menu__item"><input name="offerUpload" id="dashOffersBtn" class="menu__link menu_input btnDashboard" style="margin: 0 auto; height:20px;padding: 0;padding-bottom: 22px;width: 70%;" type="button" value="SAVE"></li> 
</form> 

但似乎不起作用。我究竟做錯了什麼？

Answer 1

你必須使用FormData()使這成爲可能，序列化或serializeArray（）不支持文件API的使用如下解決方案：

主要更新工作液

我做了更新保存按鈕的從按鈕類型，以提交，請使用以下HTML：

<form method="post" enctype="multipart/form-data" id="updateMember"> 
    <input id="input-9" name="input9" type="file" class="file file-loading" data-allowed-file-extensions='["png", "jpg", "gif", "jpeg"]' style="top: 0px;"> 
    <li class="menu__item"> 
    <input name="offerUpload" id="dashOffersBtn" class="menu__link menu_input btnDashboard" style="margin: 0 auto; height:20px;padding: 0;padding-bottom: 22px;width: 70%;" type="submit" value="SAVE"> 
    </li> 
</form> 

，並使用下面的jQuery代碼，使其工作

jQuery('#updateMember').submit(function(e){ 
      e.preventDefault(); 
      var data = new FormData(this); 
       $.ajax({ 
        type: "POST", 
        url: 'upload.php', 
        data: data, 
        mimeType: "multipart/form-data", 
        contentType: false, 
        cache: false, 
        dataType: "html", 
        processData: false, 
        success: function(data) { 
         alert(data); 
        } 
       }); 
     }); 

也使用下面的PHP代碼的擴展：

$data = $_FILES['input9']; 
$data_ext = explode('/',$data['type']); 
$extension = $data_ext[1]; 
echo $extension; 

我測試的index.php代碼

http://pastebin.com/L81xUbxL

更改Url到您的目標網址。

舊的非工作

var data = new FormData('#updateMember'); 
    $.ajax({ 
     type: "POST", 
     url: url, 
     data: data, 
     mimeType: "multipart/form-data", 
     contentType: false, 
     cache: false, 
     dataType: "html", 
     processData: false, 
     success: function(data) { 
      alert(data); 
     } 
    }); 

用於獲取擴展，你可以做到這一點

$path_ = pathinfo($_FILES["input9"]["name"]); 
$extension = $path_['extension']; 
echo $extension;