我使用jquery和PHP将图像上传到s3存储桶。我正在使用blueimp的文件上传插件。在相机上拍摄的上传图像到达服务器时宽度大于高度,无论它们是如何拍摄的。 Photoshop中生成的图像在横向和纵向都很好。我更愿意在客户端解决这个问题,而JS正在贬低。
脚本
<script src="https://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.18.0/js/jquery.fileupload.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.18.0/js/jquery.fileupload-process.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.18.0/js/jquery.fileupload-image.min.js"></script>
JQUERY
form.fileupload({
url: form.attr('action'),
type: form.attr('method'),
disableImageResize: false,
imageMaxWidth: 1280,
imageMaxHeight: 1280,
imageOrientation: true,
datatype: 'xml',
add: function(event, data) {
// Check file extention
var ext = data.files[0].name.split('.').pop().toLowerCase();;
if (currentItem.type == TYPE_IMAGE) {
if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
console.log("File type not supported. Please click on the blue help icon for more information.");
return;
}
} else if (currentItem.type == TYPE_MOVIE) {
if ($.inArray(ext, ['avi', 'mpg', 'mp4', 'mov', 'wmv', 'qt', 'flv']) == -1) {
console.log("File type not supported. Please click on the blue help icon for more information.");
return;
}
}
//check file size - 128mb limit
var fileSize = data.files[0].size;
if (fileSize > 134217728) {
console.log("File over 128MB. Please click on the blue help icon for more information.");
return;
}
showUploadDialog(data.files[0]);
// Give the file which is being uploaded it's current content-type (It doesn't retain it otherwise)
// and give it a unique name (so it won't overwrite anything already on s3).
var filename = Date.now() + '.' + data.files[0].name.split('.').pop();
form.find('input[name="Content-Type"]').val(data.files[0].type);
form.find('input[name="key"]').val((folders.length ? folders.join('/') + '/' : '') + filename);
data.submitted = new Date().getTime(); // For time remaining estimate
// Actually submit to form to S3.
data.submit();
},
progress: function(e, data) {
updateUploadDialog(data);
}
});