在HTML中使用jQuery插件实现文件上传功能非常简单，只需要引入相关的jQuery插件和CSS样式，然后在HTML中添加一个input[type="file"]即可。
我们这里介绍一种比较常用的jQuery插件——jQuery File Upload。
1. 引入jQuery及jQuery插件
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.26.0/css/jquery.fileupload.min.css" integrity="sha512-3BQJLkUHTWV1k5r5VlS1zQzYKlK0mz5o2Fm2f7J20yLyzqI1dW4tQ7K7V5WbhB/9iF7CJGWWQq5xR6Yp5WqfBA==" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.26.0/js/jquery.fileupload.min.js" integrity="sha512-Y5E0SNBqgWDvZB9hE1xUPZVrA6x7hQ1C9kV0wK8zr2MBlLHv1jZqn5H9XXa9wQZfI6e3I+3EZm9CV6+0Jt9pCw==" crossorigin="anonymous"></script>
2. 添加表单
<form id="fileupload" action="server/upload.php" method="POST" enctype="multipart/form-data">
<input type="file" name="files[]" multiple>
</form>
3. 编写JavaScript代码
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('').text(file.name).appendTo('#files');
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css('width', progress + '%');
}
});
});
4. 显示上传进度条和上传结果
<div class="progress">
<div class="progress-bar progress-bar-success"></div>
</div>
<div id="files"></div>
5. 编写服务器端代码（PHP）
<?php
$upload_folder = "uploads/";
if (!empty($_FILES)) {
$temp_file = $_FILES['files']['tmp_name'][0];
$target_path = $upload_folder . basename($_FILES['files']['name'][0]);
move_uploaded_file($temp_file, $target_path);
echo json_encode(array('files' => array(array(
'name' => $_FILES['files']['name'][0],
'size' => $_FILES['files']['size'][0],
'url' => $target_path,
'thumbnailUrl' => '',
'deleteUrl' => '',
'deleteType' => 'POST'
))));
}
?>
这样就实现了一个简单的文件上传功能。