使用Ajax实现上传文件的进度,带进度条,要求使用JQuery来实现。完整代码
时间: 2024-02-25 13:55:31 浏览: 19
以下是使用 Ajax 实现上传文件进度的完整代码:
HTML:
```html
<input type="file" id="fileUpload" />
<button id="btnUpload">上传文件</button>
<div id="progressBar"></div>
```
JavaScript:
```javascript
$(document).ready(function() {
$('#btnUpload').click(function() {
var file = $('#fileUpload')[0].files[0];
var formData = new FormData();
formData.append('file', file);
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
var percent = Math.round((e.loaded / e.total) * 100);
$('#progressBar').css('width', percent + '%');
}
});
return xhr;
},
success: function(response) {
alert(response);
}
});
});
});
```
PHP:
```php
<?php
$file = $_FILES['file'];
$fileName = $file['name'];
$fileTmpName = $file['tmp_name'];
move_uploaded_file($fileTmpName, 'uploads/' . $fileName);
echo '文件上传成功!';
?>
```
注意:该代码仅作为参考,实际使用时需要根据具体情况进行修改。