jquery 文件上传
jQuery 文件上传实现方法
使用 jQuery 实现文件上传可以通过多种方式，以下是几种常见的实现方法：
使用原生 HTML5 和 jQuery AJAX
创建一个表单并处理文件上传：
<input type="file" id="fileInput">
<button id="uploadButton">上传</button>$('#uploadButton').click(function() {
var file = $('#fileInput')[0].files[0];
var formData = new FormData();
formData.append('file', file);
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
console.log('上传成功', response);
},
error: function(xhr, status, error) {
console.error('上传失败', error);
}
});
});使用 jQuery File Upload 插件
jQuery File Upload 是一个功能强大的文件上传插件：
<input id="fileupload" type="file" name="files[]" multiple>
<div id="progress">
<div class="bar" style="width: 0%;"></div>
</div>$('#fileupload').fileupload({
url: 'upload.php',
dataType: 'json',
done: function(e, data) {
$.each(data.result.files, function(index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
},
progressall: function(e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css('width', progress + '%');
}
});使用 FormData 和 jQuery
对于多文件上传：
$('#uploadButton').click(function() {
var files = $('#fileInput')[0].files;
var formData = new FormData();
$.each(files, function(i, file) {
formData.append('file-' + i, file);
});
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(response) {
console.log('上传成功', response);
}
});
});服务器端处理示例（PHP）
if ($_FILES['file']['error'] === UPLOAD_ERR_OK) {
$tempName = $_FILES['file']['tmp_name'];
$fileName = $_FILES['file']['name'];
move_uploaded_file($tempName, 'uploads/' . $fileName);
echo json_encode(['status' => 'success', 'filename' => $fileName]);
} else {
echo json_encode(['status' => 'error', 'message' => '上传失败']);
}注意事项
- 确保表单包含
enctype="multipart/form-data"属性 - 设置
processData: false和contentType: false对于 AJAX 文件上传至关重要 - 对于大文件上传，可能需要调整服务器配置（如
upload_max_filesize和post_max_size） - 考虑添加文件类型和大小验证
这些方法提供了灵活的文件上传解决方案，可以根据具体需求选择适合的方式。
