Question

我正在使用 AWS S3 来存储我的网络应用程序文件，例如视频和图片，应用程序框架是 CodeIgniter 。

我的系统上传文件的流程如下： AJAX＆gt; PHP＆gt; AWS

我可以使用AWS提供的Php SDK成功将文件上传到存储桶，但在显示进度条时出现问题。

使用 xhr事件监听器显示进度条仅跟踪本地服务器的上传进度，不适用于AWS S3上传状态。这将成为甚至进度条100％，但AWS S3还没有完成。

所以我的问题是如何跟踪AWS S3上传进度百分比并以html代码显示？

我希望可以显示进度状态，如：

100％已上传的15％ （＆lt;＆lt;这将是实时更新）

谢谢大家。

** Controller **
public function Ajax_uploadmedia()
{
  if($_SERVER['REQUEST_METHOD'] === 'POST')
  {
     if(empty($_FILES['video_attach']['name'])){ echo 'Video File cannot be empty'; exit(); }

     $fileExtension = get_file_ext($_FILES['video_attach']['name']);
     $newfilename = uniqid();
     $config['upload_path']   = UPLOAD_PATH.'/videos/';
     $config['allowed_types'] = 'mp4|mov';
     $config['file_name']      = $newfilename;
     $this->load->library('upload', $config);
     if($this->upload->do_upload('video_attach'))
     {
        $uploadData = $this->upload->data();

        // AWS S3 Upload Process
        $this->load->library('Awslib');
        $objAwsS3Client = $this->awslib->initial();
        $uploadedFilePath =(UPLOAD_PATH.'/videos/'.$uploadData['file_name']);
        $objAwsS3Client->putObject(array(
           'Bucket' => 'gpstudysys',
           'Key'    => 'videos/'.$uploadData['file_name'],
           'Body'   => fopen($uploadedFilePath, 'r'),
           'ACL'    => 'public-read'              
        ));

     }
  }
}

Jquery Ajax请求

  $('#update_media_form').on('submit', function(e){
    e.preventDefault();
    var formData = new FormData($(this)[0]);

    $.ajax({
        xhr: function() {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener("progress", function(event) {
                if (event.lengthComputable) {
                    var percentComplete = (event.loaded / event.total)*100;

                    var percentDisplay = Math.round(percentComplete);
                    $('#percent_progress').text(percentDisplay+'%');
                    $('#percent_progress').attr('aria-valuenow', percentDisplay);
                    $('#percent_progress').attr('style', 'width: '+percentDisplay+'%');

                }
           }, false);
           return xhr;
        },
        type: 'POST',
        url: '<?php echo base_url(); ?>url_to/ajax/upload_media',
        cache: false,
        contentType: false,
        processData: false,
        data: formData,
        //dataType: 'json',
        complete:function(){
            console.log("Request finished.");
        },
        success: function(response){
            // callback(response);
        }
    });
});

使用Php和Jquery

0 个答案: