有時，開發人員可能需要在不使用 JavaScript 表單的情況下上傳文件。通常，我們創建一個表單來從用戶那里獲取數據和文件，但在本教程中，我們將學習在沒有表單的情況下從用戶那里獲取文件并將其發送到后端。
使用 FormData() 對象和 Ajax 請求
FormData 對象允許我們將表單數據存儲在鍵值對中。我們需要使用構造函數來初始化變量。我們可以允許用戶使用 HTML 輸入上傳文件并將該文件存儲在表單數據中。之后我們就可以將表單數據發送到后端了。
語法
用戶可以按照下面的語法使用FormData()對象和ajax請求來上傳文件，而無需使用表單。
form_data.append("file", uploadedFile);
$.ajax({
url: "URL",
method: "POST",
data: form_data,
});
登錄后復制
在上面的語法中，我們使用了append()方法在表單數據對象中添加一個文件。此外，我們使用 ajax() 將數據發送到 API。
示例
在下面的示例中，我們使用 標簽在 HTML 中創建了文件輸入。在 JavaScript 中，每當用戶上傳文件時，我們都會訪問它并將其添加到 form_data 對象中。
之后，我們使用ajax通過POST請求將文件發送到API。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<h3>Using the <i>FormData object and ajax request</i> to upload a file without using the form data in JavaScript</h3>
<input type = "file" name = "file" id = "file_input" />
<div id = "content"> </div>
<script>
$(document).on('change', '#file_input', function () {
let uploadedFile = document.getElementById('file_input').files[0];
var form_data = new FormData();
form_data.append("file", uploadedFile);
$.ajax({
url: "URL",
method: "POST",
data: form_data,
});
});
</script>
</body>
</html>
登錄后復制
使用jQuery簡單上傳插件
jQuery 包含簡單的上傳插件，我們可以使用它來將文件發送到 API。我們需要將簡單上傳插件的CDN添加到部分才能使用。如果開發人員正在使用該應用程序，他們可以使用 NPM 命令來安裝該包。
語法
用戶應按照以下語法使用 jQuery 簡單上傳插件使用 JavaScript 上傳無表單文件。
$(this).simpleUpload("URL", {
start: function (file) {
//upload started
},
});
登錄后復制
在上面的語法中，我們調用了簡單上傳插件的 simpleUpload() 函數來上傳文件。
示例
在下面的示例中，我們在 部分添加了 simpleUpload.min.js 文件的路徑。我們在文件輸入上添加了“更改”事件。在回調函數中，我們以文件輸入作為參考來調用 simpleUpload() 函數。我們將該對象作為 simpleUpload() 函數的第二個參數傳遞，并將鍵和回調函數作為值。
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src= "https://cdn.jsdelivr.net/npm/jquery-simpleupload@1.1.0/simpleUpload.min.js"> </script>
</head>
<body>
<h3>Using the <i>jQuery simple upload</i> plugin to upload the file without using the form</h3>
<input type = "file" name = "file" id = "file_input">
<div id = "content"> </div>
<script>
$('#file_input').change(function () {
$(this).simpleUpload("abcd.php", {
start: function (file) {
//upload started
content.innerHTML = "upload started";
},
});
});
</script>
</body>
</html>
登錄后復制
用戶學習了兩種不同的方法來上傳文件，而不使用 JavaScript 中的表單。我們在第一種方法中使用了 FormData 對象和 ajax() 方法。在第二種方法中，我們使用了Jquery的簡單上傳插件。
以上就是如何使用 JavaScript 上傳沒有表單的文件？的詳細內容，更多請關注www.92cms.cn其它相關文章！
