打開文件上傳到服務器

Question

我有一個動態生成的文件，我需要上傳到S3服務器。

如果我使用HTML輸入文件盒來選擇文件，它可以正常工作。

var file = $('#file-chooser')[0].files[0]; 

但是，當我通過文件的路徑變量，它不工作。我錯過了什麼。

var filename = "file:///http://localhost:7443/somepath/somefile.mp3"; 

缺少什麼。

Answer 1

上傳文件到服務器 首先你需要創建一個抱在你的HTML標記的<form>, <input>,和<button>元素的引用三個變量。

var form = document.getElementById('file-form'); 
var fileSelect = document.getElementById('file-select'); 
var uploadButton = document.getElementById('upload-button'); 

接下來，您需要將事件偵聽器附加到窗體的onsubmit事件。

form.onsubmit = function(event) { 
    event.preventDefault(); 

    // Update button text. 
    uploadButton.innerHTML = 'Uploading...'; 

    // The rest of the code will go here... 
} 

在事件監聽器中，您首先調用preventDefault（）事件對象傳遞給處理函數。這將阻止瀏覽器提交表單，從而允許我們使用AJAX處理文件上載。

接下來，您將uploadButton上的innerHTML屬性更新爲Uploading ....這只是向用戶提供了一些反饋，以便他們知道文件正在上傳。

您的下一個工作是從元素中檢索FileList並將其存儲在變量中。您可以通過訪問文件屬性來完成此操作。

// Get the selected files from the input. 
var files = fileSelect.files; 

然後，您創建一個新的FormData對象。這用於構造構成AJAX請求的數據有效載荷的鍵/值對。

// Create a new FormData object. 
var formData = new FormData(); 

您的下一個工作是遍歷文件數組中的每個文件，並將它們添加到您剛剛創建的formData對象。您還需要檢查用戶是否選擇了您期望的文件類型。

// Loop through each of the selected files. 
for (var i = 0; i < files.length; i++) { 
    var file = files[i]; 

    // Check the file type. 
    if (!file.type.match('image.*')) { 
    continue; 
    } 

    // Add the file to the request. 
    formData.append('photos[]', file, file.name); 
} 

在這裏，您首先從文件數組中獲取當前文件，然後檢查以確保它是圖像。該文件的類型屬性將以字符串形式返回文件類型。因此，您可以使用JavaScript match（）方法來確保此字符串與所需的類型匹配。如果文件類型不匹配，則通過調用continue來跳過該文件。

然後，您使用formData對象的append方法將此文件添加到數據有效載荷。