首页 前端知识 利用chatgpt学习认识jQuery(1)

利用chatgpt学习认识jQuery(1)

2024-03-06 09:03:06 前端知识 前端哥 340 316 我要收藏
为什么要学习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>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/3343.html
评论
发布的文章

JQuery简介与解析

2024-03-01 12:03:31

在Vue 3项目中使用 echarts

2024-03-29 15:03:05

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!