Javascript 获取Cloudinary上载过程数据

我正在尝试下面的代码来显示使用jQuery上传php的上传过程。但问题是进程栏没有显示正确的上传百分比。当我点击提交按钮时，进程栏总是显示100%

HTML

  <form data-url="index.php?upload" method="post" id="form" enctype="multipart/form-data">
            <input type="hidden" id="file_src" name="file_src" value="E:/images/cover.jpg" />
            <input type="hidden" name="quality" value="90" />
            <input type="hidden" name="distroy" value="1" />
            <input id="fileupload" type="file" name="files[]" data-url="index.php?upload" multiple>
      <button class="button" type="submit">Send</button>
         </form>
      <div id="progress" class="progress">
        <div class="progress-bar progress-bar-success"></div>
      </div>

    <script src="view/jquery.js" type="text/javascript"></script>
    <script src="view/jquery.ui.widget.js" type="text/javascript"></script>
    <script src="view/load-image.all.min.js"></script>
    <script src="view/canvas-to-blob.min.js"></script>
    <script src="view/jquery.iframe-transport.js" type="text/javascript"></script>
    <script src="view/jquery.fileupload.js" type="text/javascript"></script>
    <script src="view/jquery.fileupload-process.js"></script>
    <script src="view/jquery.fileupload-image.js" type="text/javascript"></script>
    <script src="view/jquery.fileupload-validate.js"></script>
    <script src="view/jquery.cloudinary.js" type="text/javascript"></script>

   <script> 
   $('.button').on('click', function(e) {
    e.preventDefault()
    $('#fileupload').cloudinary_fileupload({
        formData: $('#s_form').serializeArray(),
        add: function (e, data) {
                data.submit();
            },
        }).fileupload('send', {files: [$('#file_src').val()]})
       .bind('cloudinaryprogressall', function(e, data) { 
         $('#progress .progress-bar').css('width', Math.round((data.loaded * 100.0) / data.total) + '%');
        });
  });
</script>

必须首先使用cloudinary_fileupload（）方法初始化输入字段（cloudinary fileupload）。 例如：

<script> 
$(function() { 
$('.cloudinary-fileupload').cloudinary_fileupload({ 
  // optional uploader parameters
})
$('.cloudinary-fileupload').on('fileuploadprogress', function(e, data) { 
console.log(data.loaded); 
$('.progress-bar').attr('aria-valuenow',Math.round((data.loaded * 100.0) / data.total)); 
}); 
$('.cloudinary-fileupload').on('fileuploadfail', function(e, data){ 
alert(e); 
}); 
$("body").append($.cloudinary.image('sample.jpg', { alt: "Sample Image" })[0]); 
}); 
</script> 

$（函数（）{
$（'.cloudinary fileupload'）。cloudinary_fileupload（{
//可选上传器参数
})
$（'.cloudinary fileupload'）。在（'fileuploadprogress'，函数（e，data）{
console.log（data.loaded）；
$（'.progress bar'）.attr（'aria-valuenow'，Math.round（（data.loaded*100.0）/data.total））；
}); 
$（'.cloudinary fileupload'）。在（'fileuploadfail'，函数（e，data）{
警报（e）；
}); 
$（“body”）.append（$.cloudinary.image（'sample.jpg'，{alt:“sample image”}）[0]）；
}); 

<script> 
$(function() { 
$('.cloudinary-fileupload').cloudinary_fileupload({ 
  // optional uploader parameters
})
$('.cloudinary-fileupload').on('fileuploadprogress', function(e, data) { 
console.log(data.loaded); 
$('.progress-bar').attr('aria-valuenow',Math.round((data.loaded * 100.0) / data.total)); 
}); 
$('.cloudinary-fileupload').on('fileuploadfail', function(e, data){ 
alert(e); 
}); 
$("body").append($.cloudinary.image('sample.jpg', { alt: "Sample Image" })[0]); 
}); 
</script>