带有BlueImp Uploader的Amazon S3,上传多个文件

时间:2016-01-11 17:59:25

标签: javascript html angularjs amazon-s3 blueimp

我能够将blueimp(https://github.com/blueimp/jQuery-File-Upload)用于上传到Amazon S3的单个文件,但是当我尝试使用多个文件的相同方案时,我的错误请求会出错。

我的Javascript看起来像这样:

    // jquery upload

    $('.direct-upload').each(function() {
        var form = $(this);

        form.fileupload({
            url : form.attr('action'),
            type : 'POST',
            datatype : 'xml',
            add : function(event, data) {
                console.log("add");
                console.log(data);
                // set key / file name
                $scope.$apply(function() {
                    $scope.key = Date.now() + "_" + data.originalFiles[0].name;
                });
                // Message on unLoad.
                window.onbeforeunload = function() {
                    return 'You have unsaved changes.';
                };
                // Submit
                data.submit();
            },
            send : function(e, data) {
                // onSend
            },
            progress : function(e, data) {
                // This is what makes everything really cool, thanks to that
                // callback
                // you can now update the progress bar based on the upload
                // progress.
                var percent = Math.round((data.loaded / data.total) * 100);
                $('.bar').css('width', percent + '%');
            },
            fail : function(e, data) {
                // Remove 'unsaved changes' message.
                window.onbeforeunload = null;
            },
            success : function(data) {
                console.log("success");
                console.log(data);
            },
            done : function(event, data) {
                // Fill the name field with the file's name.
                console.log("upload_original_name " + data.originalFiles[0].name);
            }
        });
    });

然后是我的html页面:

<form action="https://bucket-test.s3.amazonaws.com/" method="post" enctype="multipart/form-data" class="direct-upload">
    <input type="hidden" name="key" value="uploads/{{key}}">
    <input type="hidden" name="AWSAccessKeyId" value="MY ACCESS ID"> 
    <input type="hidden" name="acl" value="private"> 
    <input type="hidden" name="policy" value="${policy}">
    <input type="hidden" name="signature" value="${signature}">
    <input type="hidden" name="Content-Type" value="{{contentType}}">
    <!-- Include any additional input fields here -->
    File to upload to S3: 
    <input name="file[]" type="file" onchange="angular.element(this).scope().uploadFile(this.files)" multiple> 
    <!-- Progress Bar to show upload completion percentage -->
    <div class="progress"><div class="bar"></div></div>
</form>

0 个答案:

没有答案