我正在尝试利用blueimp开发的jQuery文件上传插件中提供的客户端图像大小调整： https://github.com/blueimp/jQuery-File-Upload
不幸的是，我无法让图像调整大小起作用。上传本身运作完美。
this.$('.fileupload').fileupload({
url: websiteUrl + 'deed/uploadimage',
dataType: 'json',
previewMaxWidth: 90,
previewMaxHeight: 90,
previewCrop: true,
imageOrientation: true,
disableImageResize: false,
add: function($, data) {
_.each(data.files, function(file){
file.model = self.addImagePreview();
});
_.defer(_.bind(data.submit, data));
},
done: function($, data) {
// Quirky shit. Iterate over data.files array while we know that
// only one file are uploaded at a time...
_.each(data.files, function(file){
file.model.set({
"uploading": false,
"src": data.response().result.image,
"preview": data.response().result.cropped
});
});
}
});
我试过把断点放在 resizeImage 方法，以查看它是否由于某种原因打破了其中一个条件，但从不调用该方法。
所有依赖项按此顺序加载：
load-image.min.js
canvas-to-blob.js
jquery.ui.widget.js
jquery.fileupload.js
jquery.fileupload-process.js
jquery.fileupload-image.js
jquery.iframe-transport.js
我在这里错过了什么吗？
找到了解决方案。
出现在使用时 fileupload-process 扩展，指定 add 函数覆盖了函数 fileupload-process 分机。调用processQueue，这是调整图像大小和更多注册的地方。
解决方案是附加一个事件监听器 fileuploadadd 而不是重写 add 功能：
$('.fileupload').fileupload({ ... }).bind('fileuploadadd', callback)
或者，从您自己的add方法中调用原始的add方法：
$('.fileupload').fileupload({
add: function(e, data) {
$.blueimp.fileupload.prototype.options.add.call(this, e, data);
}
});
仅供参考 - 找到解决方案[使用最新下载来自github.com/blueimp/] - 调整大小适用于“Basic Plus”但不适用于“Basic Plus UI” - 所以通过抛弃main.js并添加新的“混合”，如下所示在最后的JS脚本下 - 所有这些都适用于“Basic Plus UI”版本，以便调整客户端图像的大小。
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = window.location.hostname === 'mydomain.com/' ?
'//mydomain.com/alldevs/jQuery-File-Upload/' : 'server/php/',
uploadButton = $('<button/>')
.addClass('btn btn-primary')
.prop('disabled', true)
.text('Processing...')
.on('click', function () {
var $this = $(this),
data = $this.data();
$this
.off('click')
.text('Abort')
.on('click', function () {
$this.remove();
data.abort();
});
data.submit().always(function () {
$this.remove();
});
});
$('#fileupload').fileupload({
url: url,
dataType: 'json',
autoUpload: false,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 999000,
// Enable image resizing, except for Android and Opera,
// which actually support image resizing, but fail to
// send Blob objects via XHR requests:
//disableImageResize: /Android(?!.*Chrome)|Opera/
// .test(window.navigator.userAgent),
previewMaxWidth: 120,
previewMaxHeight: 120,
previewCrop: false,
disableImageResize:false,
imageMaxWidth: 1024,
imageMaxHeight: 1024,
imageCrop: false // Force cropped images
});
// Load existing files:
$('#fileupload').addClass('fileupload-processing');
$.ajax({
// Uncomment the following to send cross-domain cookies:
//xhrFields: {withCredentials: true},
url: $('#fileupload').fileupload('option', 'url'),
dataType: 'json',
context: $('#fileupload')[0]
}).always(function () {
$(this).removeClass('fileupload-processing');
}).done(function (result) {
$(this).fileupload('option', 'done')
.call(this, $.Event('done'), {result: result});
})
});
加上上面放置的JS脚本的顺序：
jquery.min.js
tmpl.min.js
jquery.ui.widget.js
load-image.all.min.js
canvas-to-blob.min.js
bootstrap.min.js
jquery.iframe-transport.js
jquery.fileupload.js
jquery.fileupload-process.js
jquery.fileupload-image.js
jquery.fileupload-audio.js
jquery.fileupload-video.js
jquery.fileupload-validate.js
jquery.fileupload-ui.js
我也遇到过jQuery File Upload的问题，并通过更改以下部分中文件“jquery.fileupload-image.js”中的选项来解决它：
// The File Upload Resize plugin extends the fileupload widget
// with image resize functionality:
$.widget('blueimp.fileupload', $.blueimp.fileupload, {
options: {
...
// The maximum file size of images to load:
loadImageMaxFileSize: 20000000, // 10MB
// The maximum width of resized images:
imageMaxWidth: 250,
// The maximum height of resized images:
imageMaxHeight: 250,
...
// Disable the resize image functionality by default:
disableImageResize: false,
...
},
以某种方式将选项放在“其他地方”（在我的情况下，从官方页面的官方教程中复制的所有代码）都不会覆盖此处陈述/显示的默认选项。
它在我的情况下不起作用可能是我的错，所以没有冒犯。无论如何，如果这个建议可以帮助别人，这里就是。如果你喜欢或离开，试试看。