Question

我正在使用以下代码 -

$(function () {
**alert("html5 upload");**
var dropbox = $('#dropbox'),
    message = $('.message', dropbox);

dropbox.filedrop({
    // The name of the $_FILES entry:
    paramname: 'files',

    maxfiles: 50,
    maxfilesize: 2,
    url: '/Upload/UploadMultipleImages',

    uploadFinished: function (i, file, response) {
        $.data(file).addClass('done');
        // response is the JSON object that post_file.php returns
    },

    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! (configurable)');
                break;
            case 'FileTooLarge':
                alert(file.name + ' is too large! Please upload files up to 2mb (configurable).');
                break;
            default:
                break;
        }
    },

    // Called before each upload is started
    beforeEach: function (file) {
        if (!file.type.match(/^image\//)) {
            alert('Only images are allowed!');

            // Returning false will cause the
            // file to be rejected
            return false;
        }
    },

    uploadStarted: function (i, file, len) {
        createImage(file);
    },

    progressUpdated: function (i, file, progress) {
        $.data(file).find('.progress').width(progress);
    }

});

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


function createImage(file) {

    var preview = $(template),
        image = $('img', preview);

    var reader = new FileReader();

    image.width = 100;
    image.height = 100;

    reader.onload = function (e) {

        // e.target.result holds the DataURL which
        // can be used as a source of the image:

        image.attr('src', e.target.result);
    };

    // Reading the file as a DataURL. When finished,
    // this will trigger the onload function above:
    reader.readAsDataURL(file);

    message.hide();
    preview.appendTo(dropbox);

    // Associating a preview container
    // with the file, using jQuery's $.data():

    $.data(file, preview);
}

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

在我的代码的第二行，当我使用警报时，我的功能正常工作，但无论何时删除，该功能根本不起作用。我已经在网上检查它说它可能是因为ajax调用。但目前在页面加载时我没有进行任何ajax调用。如果有人遇到同样的问题，请帮助我。

Answer 1

Filedrop使用ajax。把你的

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

在函数createImage()

中

Filedrop仅在函数中包含alert语句时才有效

1 个答案: