Question

我在拖放中使用此脚本删除文件上传系统，它工作得很好，除了它不会显示我的文件名。这是代码

$(function () {
    var dropbox = $('#dropbox'),
        message = $('.message', dropbox),
        template = "";
    dropbox.filedrop({
        paramname: 'pic',
        maxfiles: 5,
        maxfilesize: 50,
        url: 'post_file.php',
        uploadFinished: function (i, file, response) {
            $.data(file).addClass('done');
        },
        error: function (err, file) {
            switch (err) {
            case 'BrowserNotSupported':
                showMessage('Your browser does not support HTML5 file uploads!');
                break;
            case 'TooManyFiles':
                alert('Too many files! Please select 5 at most!');
                break;
            case 'FileTooLarge':
                alert(file.name + ' is too large! Please upload files up to 50mb.');
                break;
            default:
                break;
            }
        },
        uploadStarted: function (i, file, len) {
            createImage(file);
        },
        progressUpdated: function (i, file, progress) {
            $.data(file).find('.progress').width(progress);
        }
    });

    function gName(file) {
        template = '<div class="preview">' +
            '<p>' + file.name + '</p>' +
            '</span>' +
            '<div class="progressHolder">' +
            '<div class="progress"></div>' +
            '</div>' +
            '</div>';
    }

    function createImage(file) {
        var preview = $(template);
        var reader = new FileReader();
        reader.readAsDataURL(file);
        message.hide();
        preview.appendTo(dropbox);
        $.data(file, preview);
    }

    function showMessage(msg) {
        message.html(msg);
    }
});

如果我在alert(file.name)函数中运行createImage，它会为我抓取它，但模板根本不会添加到页面中。这几乎是我可以定义模板而不会出现错误的唯一方法，但它不会显示它。如果我将模板更改为

var template = '<div class="preview">'+
'<span class="imageHolder">'+
'<img />'+
'<span class="uploaded"></span>'+
'</span>'+
'<div class="progressHolder">'+
'<div class="progress"></div>'+
'</div>'+
'</div>';

它工作正常，但我无法访问该变量中的file.name，而这正是我所需要的。

Answer 1

好的我想我知道你要做什么了。

var template = '<div class="preview">' +
    '<p>' + file.name + '</p>' +
    '</span>' +
    '<div class="progressHolder">' +
    '<div class="progress"></div>' +
    '</div>' +
    '</div>';

您要做的是指定（或创建）对象，然后使用.append()添加template。

$('#dropbox').append(template);

这会在template

的结束标记之前添加#dropbox

您不必在函数中包装单个变量。只要file处于同一范围内（或其所在级别的内部级别）和，就可以使用它，这样就可以了。

如果你真的愿意将它包装在一个函数中return(thevariable)，那么它不仅仅是坐在那里;）

愚弄我的Fiddle？

Jquery没有显示响应

1 个答案: