[英]jQuery Upload to S3 with PHP - Error
我正在WordPress網站上使用jQuery File Upload插件。 我修改了一些事件,以便在上載文件時,隱藏字段的值發生變化,這些字段在提交到后端時傳遞,並在WordPress中使用該數據創建自定義帖子類型。
然后,我去實現一個PHP腳本 ,該腳本將文件上傳到S3存儲桶。 一切正常,除了我現在在前端遇到錯誤外,它無法完成將隱藏值更新為完整文件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:無法讀取未定義的屬性“ length”
data.result.files
undefined
,您應該在初始化時進行更正。 如果data.result.files
是一個array
,則可以使用each()
對其進行迭代。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.