FormData不發送附加文件

我正在製作一個JavaScript應用程序用於拖放文件上傳支持 - 但我遇到了一個問題，我一直堅持了幾天。FormData不發送附加文件

似乎'下降'的文件（在我的情況下通過jQuery，.on('drop', function(e){）文件實際上並沒有被髮送。

我一直在瀏覽答案StackOverflow上的答案後 - 請不要標記爲重複。重複部分不提供幫助 - 我還沒有找到我在實施過程中沒有考慮到的方面。就好像這個解決方案適用於其他人，但我...

不相信我？ FIDDLE HERE

（免責聲明：明明我已經修改我的解決方案，不使用跨域請求，我使用的端點我對小提琴發現作爲替補，但它似乎存在同樣的問題，我一直體驗 - 希望這是足夠的作爲這個例子的基礎）

問題是，上傳立即完成 - 顯然它只是發送文本數據，並沒有上傳文件本身。檢查請求有效載荷我看到數據不存在。

的Javascript

function uploadFile(file){ 
    console.log("uploadFile"); 
    var form = new FormData(); 
    form.append('file', file); 
    form.append('hello', 'world'); 
    $.ajax({ 
    url: "/echo/js/?js=hello%20world!", 
    type: "POST", 
    data: form, 
    processData: false, 
    contentType: false, 
    cache: false, 
    success: function(data){ 
     alert("SUCCESS"); 
    } 
    }); 
} 
$(document).ready(function(){ 

    /* Disable default drag/drop browser behavior. */ 
    $("html").on('drop', function(e){e.preventDefault(); e.stopPropagation();}); 
    $("html").on('dragover', function(e){e.preventDefault(); e.stopPropagation();}); 
    $("html").on('dragenter', function(e){e.preventDefault(); e.stopPropagation();}); 
    $("html").on('dragleave', function(e){e.preventDefault(); e.stopPropagation();}); 

    $(".drop_area").on('drop', function(e){ 
    e.preventDefault(); 
    e.stopPropagation(); 
    var files = e.originalEvent.target.files || e.originalEvent.dataTransfer.files; 
    console.log(files); 
    for (var i = 0; i < files.length; i++) { 
     uploadFile(files[i]) 
    } 
    }); 
});

HTML

<div class='drop_area'> 
Drop your file in this div. 
</div>

CSS

.drop_area { 
    border: 1px solid black; 
    background: #ffffff; 
    height: 300px; 
    width: 50%; 
    position: relative; 
}

來源

2017-05-10 1owk3y

您需要檢查後端，後端是否接收文件？上傳可能會立即完成，因爲您的文件很小，並且您在本地進行測試。 –

我正在測試一個相當大的文件，至少幾兆字節。我已經在本地進行了測試（顯然這是即時的，因爲所有的文件都已經在我的計算機上可用），但是小提琴的實現至少應該嘗試傳輸文件。我不明白爲什麼邊界之間沒有文件數據 - 這是否是一種常見現象？ Chrome是否簡單地忽略了這些信息？ – 1owk3y

在Chrome中看到空白請求標頭後，根據快速上傳速度，我假定文件沒有發送。

將代碼添加到我的後端端點後不過（通過var_dump($_FILES['file']);），我看到以下內容：

array(5) { 
    ["name"]=> 
    string(14) "two-minute.mp4" 
    ["type"]=> 
    string(9) "video/mp4" 
    ["tmp_name"]=> 
    string(36) "/Applications/MAMP/tmp/php/phpXfCu0U" 
    ["error"]=> 
    int(0) 
    ["size"]=> 
    int(12904619) 
}

大size屬性似乎表明相當多的數據是從我上傳菱。它可能一直在工作。我會看更多的明天，但目前的答案可能是這樣的：

「它看起來它不起作用從您的瀏覽器，但它實際上是......」。

部分贊助@Alisher Gafurov說服我仔細檢查後端實施，以驗證文件是否確實不存在。

來源

2017-05-10 08:46:18 1owk3y

FormData不發送附加文件

回答

相關問題