我能够将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>