使用 PHP 将 jQuery 上传到 S3 - 错误

Question

我在 WordPress 网站上使用 jQuery File Upload 插件。我修改了一些事件，以便在上传文件时，隐藏字段的值会发生变化，这些值会在提交到后端时传递，并使用该数据在 WordPress 中创建自定义帖子类型。

然后我去实现一个PHP script，而不是将文件上传到 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('&nbsp;&nbsp;<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) {

未捕获的类型错误：无法读取未定义的属性“长度”

Answer 1

data.result.files 是undefined，您应该在初始化时进行更正。如果data.result.files 将是array，您将能够使用each() 对其进行迭代。