在Web開發(fā)中，提供一個(gè)方便的上傳文件的功能是非常必要的。通常情況下，我們會使用表單來上傳文件。但是，使用默認(rèn)的表單上傳文件方式存在一些問題，比如上傳文件的進(jìn)度不易展示，用戶體驗(yàn)不夠友好等。針對這些問題，我們可以使用jquery和t拖拽進(jìn)行文件上傳，以提升用戶體驗(yàn)。
具體實(shí)現(xiàn)方法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Upload</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script src="https://unpkg.com/t-drop"></script>
<script>
$(document).ready(function () {
$('body').tdrop({
url: '/upload', // 上傳文件的URL
method: 'POST', // 上傳方式
parse: function (res) { // 解析上傳成功后的響應(yīng)
var fileUrl = JSON.parse(res).url;
return fileUrl;
},
limit: 5, // 最多上傳的文件數(shù)量
maxsize: 2 * 1024 * 1024, // 上傳文件的最大大小
drop: function (e) { // 拖拽文件到頁面的回調(diào)函數(shù)
console.log(e.files); // 上傳文件的信息
},
success: function (res) { // 上傳成功后的回調(diào)函數(shù)
console.log(res); // 上傳成功后的響應(yīng)
},
error: function (err) { // 上傳失敗后的回調(diào)函數(shù)
console.log(err); // 上傳失敗的錯(cuò)誤信息
}
});
})
</script>
</head>
<body>
</body>
</html>上面的代碼中，我們引入了jquery庫和t拖拽庫。t拖拽庫是一個(gè)輕量級的拖拽上傳插件，支持多文件上傳、拖拽上傳、進(jìn)度條展示等功能。在代碼中，我們使用tdrop方法對拖拽上傳進(jìn)行配置，包括上傳文件的URL、上傳方式、最多上傳的文件數(shù)量、上傳文件的最大大小、上傳成功后的解析函數(shù)、上傳成功后的回調(diào)函數(shù)、上傳失敗后的回調(diào)函數(shù)等。在頁面加載完成后，我們調(diào)用tdrop方法對頁面進(jìn)行配置，實(shí)現(xiàn)了拖拽上傳功能。