获取 Cloudinary 上传过程数据答案

【问题标题】：Get Cloudinary upload process data获取 Cloudinary 上传过程数据
【发布时间】：2019-01-07 16:58:39
【问题描述】：

我正在尝试使用下面的代码来显示使用 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>

PHP：

include DIR_SYSTEM . 'cloudinary/Cloudinary.php';
include DIR_SYSTEM . 'cloudinary/Uploader.php';
    \Cloudinary::config(array(
                "cloud_name" => "demo",
                "api_key" => "demo",
                "api_secret" => "demo"
        ));

  $file = $this->request->post['file_src'];
  $quality = $this->request->post['quality'];

  $default_options = array("quality" => $quality);
  $data = \Cloudinary\Uploader::upload($file, $default_options);

        $json = json_encode($data);
        header("Content-type:application/json");
        echo $json;

【问题讨论】：

标签： javascript jquery jquery-file-upload blueimp cloudinary

【解决方案1】：

必须首先使用 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>

【讨论】：