request.FILES是空的時候發送AJAX文件上傳請求到服務器

Question

我有一個簡單的形式index.html：

<div id="Competence-form"> 
    <form id="competence" method="post" action="/" enctype="multipart/form-data"> 
    {% csrf_token %}      
     <input type="file" id="Picture-text" name="comp-pic" /> 
     <input type="button" name="comp-defaultButton" value="Default" /> 
    </form> 
</div> 

，這裏是在index.js我的Ajax請求：

$("#Competence-form").submit(function(event){ 
    $(".ajaxLogoBoard").show(); 

    //prevent normal submit when submit button click because check something ... 
    event.preventDefault(); 

    //getting values 
    var picture = $("#Picture-text").val(); 
    var data ={ 
     picture:picture, 
    }; 

    //send AJAX 
    $.ajax({ 
     url: '/ajax/check', 
     data: data, 
     dataType: 'json', 
     success:function(result){ 
      // do something 
     } 

在我的服務器要使用request.FILES但本字典爲空：

def competenceCheck(request): 
    # ... some code to initialize upload 
    # ... 
    picture = request.REQUEST['picture']  # this will return the path 
    print request.FILES  # but this is empty => <MultiValueDict: {}> 
    # ... some code after upload 
    # ... 

我做錯了什麼？

Answer 1

您無法在Ajax中上傳這樣的文件 - 調試日誌會告訴您$("#Picture-text").val()爲空。

你將需要使用某種文件上傳插件來做到這一點。