有時，開發(fā)人員可能需要在不使用 JavaScript 表單的情況下上傳文件。通常，我們創(chuàng)建一個表單來從用戶那里獲取數(shù)據(jù)和文件，但在本教程中，我們將學(xué)習(xí)在沒有表單的情況下從用戶那里獲取文件并將其發(fā)送到后端。
使用 FormData() 對象和 Ajax 請求
FormData 對象允許我們將表單數(shù)據(jù)存儲在鍵值對中。我們需要使用構(gòu)造函數(shù)來初始化變量。我們可以允許用戶使用 HTML 輸入上傳文件并將該文件存儲在表單數(shù)據(jù)中。之后我們就可以將表單數(shù)據(jù)發(fā)送到后端了。
語法
用戶可以按照下面的語法使用FormData()對象和ajax請求來上傳文件，而無需使用表單。
form_data.append("file", uploadedFile);
$.ajax({
url: "URL",
method: "POST",
data: form_data,
});
登錄后復(fù)制
在上面的語法中，我們使用了append()方法在表單數(shù)據(jù)對象中添加一個文件。此外，我們使用 ajax() 將數(shù)據(jù)發(fā)送到 API。
示例
在下面的示例中，我們使用 標(biāo)簽在 HTML 中創(chuàng)建了文件輸入。在 JavaScript 中，每當(dāng)用戶上傳文件時，我們都會訪問它并將其添加到 form_data 對象中。
之后，我們使用ajax通過POST請求將文件發(fā)送到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>
登錄后復(fù)制
使用jQuery簡單上傳插件
jQuery 包含簡單的上傳插件，我們可以使用它來將文件發(fā)送到 API。我們需要將簡單上傳插件的CDN添加到部分才能使用。如果開發(fā)人員正在使用該應(yīng)用程序，他們可以使用 NPM 命令來安裝該包。
語法
用戶應(yīng)按照以下語法使用 jQuery 簡單上傳插件使用 JavaScript 上傳無表單文件。
$(this).simpleUpload("URL", {
start: function (file) {
//upload started
},
});
登錄后復(fù)制
在上面的語法中，我們調(diào)用了簡單上傳插件的 simpleUpload() 函數(shù)來上傳文件。
示例
在下面的示例中，我們在 部分添加了 simpleUpload.min.js 文件的路徑。我們在文件輸入上添加了“更改”事件。在回調(diào)函數(shù)中，我們以文件輸入作為參考來調(diào)用 simpleUpload() 函數(shù)。我們將該對象作為 simpleUpload() 函數(shù)的第二個參數(shù)傳遞，并將鍵和回調(diào)函數(shù)作為值。
<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/[email protected]/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>
登錄后復(fù)制
用戶學(xué)習(xí)了兩種不同的方法來上傳文件，而不使用 JavaScript 中的表單。我們在第一種方法中使用了 FormData 對象和 ajax() 方法。在第二種方法中，我們使用了Jquery的簡單上傳插件。
以上就是如何使用 JavaScript 上傳沒有表單的文件？的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
