jquery 上传图片 进度条

Jquery上传图片是一项非常实用的功能，可以帮助我们方便地将图片上传至服务器。而使用进度条则可以让用户更好地了解上传进度，提高用户体验。下面我们就来了解一下如何在Jquery中实现上传图片进度条。

//html代码
<form id="form-upload">
  <input type="file" name="file" id="file">
  <button type="submit" id="btn-upload">上传图片</button>
</form>

<div id="progress"></div>

//js代码
$(function(){
  $("#btn-upload").click(function(){
    var formData = new FormData($("#form-upload")[0]);
    $.ajax({
      url: "/upload", //上传地址
      type: "POST",
      data: formData,
      dataType: "json",
      contentType: false,
      processData: false,
      xhr: function(){
        var xhr = $.ajaxSettings.xhr();
        xhr.upload.onprogress = function(evt){
          //计算百分比并更新进度条
          var percent = Math.floor(evt.loaded / evt.total * 100) + "%";
          $("#progress").css("width", percent);
        };
        return xhr;
      },
      success: function(result){
        console.log(result);
      },
      error: function(error){
        console.log(error);
      }
    });
    return false;
  });
});

上面的代码中，我们创建了一个带有文件上传表单的提交按钮，当用户点击该按钮时，我们使用Jquery的$.ajax方法进行上传操作。同时，我们使用xhr对象的upload.onprogress事件来监控上传进度，并通过计算百分比来更新进度条的宽度。

需要注意的是，由于我们使用了FormData对象来传递数据，因此我们需要将contentType和processData设置为false，以避免数据被序列化。

总的来说，使用Jquery实现上传图片进度条非常简单，只需要利用xhr对象来监控上传进度并更新进度条即可。希望读者在实现该功能时能够顺利以及愉快。