WordPress サイトでjQuery File Uploadプラグインを使用しています。ファイルがアップロードされると、非表示フィールドの値が変更され、バックエンドへの送信時に渡され、WordPress でそのデータを使用してカスタム投稿タイプが作成されるように、いくつかのイベントを変更しました。
次に、代わりにファイルを S3 バケットにアップロードするPHP スクリプトを実装しました。フロントエンドでエラーが発生し、非表示の値を完全なファイル URL に更新するタスクが完了しないことを除いて、すべて正常に動作します。
スクリプトは次のとおりです。
$(function() {
var url = '<?php echo plugins_url(); ?>/jQuery-File-Upload/server/php/',
id = '#upload<?php echo $i; ?>';
$(id + ' .fileupload').fileupload({
url: url,
dataType: 'json',
<?php
// images and pdfs
if ($i == 1) {
?>
acceptFileTypes: /(\.|\/)(gif|jpe?g|png|pdf)$/i,
<?php
// images only
} else {
?>
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
<?php } ?>
maxFileSize: 5000000,
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator && navigator.userAgent),
imageMaxWidth: 800,
imageMaxHeight: 800,
previewMaxWidth: 100,
previewMaxHeight: 100,
// previewCrop: true
}).on('fileuploadadd', function (e, data) {
data.context = $('<div/>').appendTo(id + ' .files');
$.each(data.files, function (index, file) {
var node = $('<p/>').append($('<span/>').text('Uploading...'));
origname = (file.name);
node.appendTo(data.context);
$(id + ' .uploaderror').remove(); // Remove any error
$(id + ' .fileupload').hide(); // Hide File Upload
$(id + ' .progress').show(); // Show Progress
// Cancel Button
$(id + ' .files p span').append(' <a class="cancelupload">Cancel</a>');
$(id + ' .cancelupload').click(function(e) {
// Cancel Upload
$(id + ' .progress').hide(); // Hide Progress
$(id + ' .fileupload').show(); // Show File Upload
$(id + ' div.files div').remove(); // Remove divs
$(id + ' div.files').append('<span class="uploaderror">Upload canceled</span>'); // Canceled message
data.abort(); // Abort upload
});
});
}).on('fileuploadprocessalways', function (e, data) {
var index = data.index,
file = data.files[index],
node = $(data.context.children()[index]);
if (file.error) {
$(id + ' .progress').hide(); // Hide Progress
$(id + ' div.files div').remove(); // Remove divs
$(id + ' .cancelupload').remove(); // Remove cancel message
$(id + ' .fileupload').show(); // Show File Upload
$(id + ' div.files').append('<span class="uploaderror">' + file.error + '</span>'); // Error message
}
}).on('fileuploadprogressall', function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$(id + ' .progress .bar').css(
'width',
progress + '%'
);
$(id + ' .progress .bar').text(progress + '%');
}).on('fileuploaddone', function (e, data) {
$(id + ' .progress').hide(); // Hide Progress
$(id + ' .cancelupload').remove(); // Remove cancel message
$.each(data.result.files, function (index, file) {
$(data.context.children()[index]).text(origname);
$(data.context.children()[index]).append(' <img src="<?php echo plugins_url(); ?>/images/check.png" alt="Successs" />');
$(id + ' .uploadurl').val(file.url);
$(data.context.children()[index]).append('<br><a class="remove">Remove</a>');
// PDF or not?
if (file.type == 'application/pdf') {
$(id + ' .files p').prepend('<img class="uploadpreview" src="<?php echo plugins_url(); ?>/images/PDF.png" alt="PDF" />');
} else {
// Must be an image ... Preview the thumbnail
$(id + ' .files p').prepend('<img class="uploadpreview" src="' + url + 'files/thumbnail/' + file.name + '" alt="PDF" />');
}
});
$(id + ' a.remove').click(function(e) {
// Remove image
$(id + ' .uploadurl').val(''); // Remove value of hidden field
$(id + ' div.files div').remove(); // Remove divs
$(id + ' .fileupload').show(); // Show File Upload
});
}).on('fileuploadfail', function (e, data) {
$.each(data.result.files, function (index, file) {
var error = $('<span/>').text(file.error);
$(data.context.children()[index])
.append(error);
});
});
});
この行で壊れます:
$.each(data.result.files, function (index, file) {
キャッチされていない TypeError: 未定義のプロパティ '長さ' を読み取ることができません