为什么要学习jquery
在做一个上传文件到服务器需要实现显示上传文件进度条的时候,chatgpt给了一段使用jquery的代码
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
var form = $('#myForm');
var progress = $('#progress');
var progressBar = $('.progress-bar');
var successMsg = $('.sr-only');
form.on('submit', function(event) {
event.preventDefault();
var formData = new FormData(form[0]);
$.ajax({
url: 'uploads.php',
type: 'POST',
data: formData,
beforeSend: function() {
progress.show();
progressBar.width('0%');
},
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener('progress', function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
progressBar.css({width: percentComplete * 50 '%'});
}
}, false);
return xhr;
},
success: function(data) {
successMsg.html('上传成功!');
progress.hide();
},
error: function(err) {
successMsg.html('上传失败!');
console.log(err);
},
cache: false,
contentType: false,
processData: false
});
});
});
</script>