利用chatgpt学习认识jQuery（1）

biku

已于 2023-03-05 00:56:07 修改

阅读量3.3k

点赞数

分类专栏： # chatgpt学习机文章标签： chatgpt jquery入门自学成才 Powered by 金山文档

于 2023-03-05 00:38:36 首次发布

本文链接：https://blog.csdn.net/biku/article/details/129341106

版权

为什么要学习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>