Question

我正在使用Uploadify jQuery插件将图片上传到我的网站。我自己使用自己的队列标记自定义它。这是标记：

<form id="upload-form" action="" method="post" enctype="multipart/form-data">
    <div id="file-queue">
        <ul>

        </ul>
    </div>

    <div id="upload-form-buttons">
        <input type="file" name="images" id="image-upload" />
        <a href="" class="primary-button">Upload</a>
    </div>
</form>

和Uploadify代码：

$('#image-upload').uploadify({
    'swf': '/swf/uploadify.swf',
    'uploader': 'uploadify.php',
    'buttonClass': 'primary-button',
    'buttonText': 'Select files',
    'height': 28,
    'width': 100,
    'queueID': 'file-queue',
    'overrideEvents': ['onSelect'],
    'onSelect': function(file) {
        onSelect(file);
    },
    'onCancel': function(file) {
        onCancel(file);
    }
});

当用户选择文件时，我将触发此功能将其添加到上传队列中：

function onSelect(file) {
    // Add the file to the queue
    $('#file-queue ul').append('<li class="' + file.id + '">' + trimName(file.name) + '<a href="javascript:$(\'#image-upload\').uploadify(\'cancel\')"><img class="cancel" src="/img/cancel.png" /></a><span class="filesize">' + readableFileSize(file.size) + '</span></li>');
}

该文件的标记如下：

<li class="SWFUpload_0_0">
    IMG_20120610_185131.jpg
    <a href="javascript:$('#image-upload').uploadify('cancel')">
        <img class="cancel" src="/img/cancel.png">
    </a>
    <span class="filesize">606.1KB</span>
</li>

现在，当我点击取消按钮时，Uploadify不会触发取消事件。这是应该被解雇的函数：

function onCancel(file) {
    // Remove file from queue
    $('#file-queue ul li.' + file.id).remove();
}

但文件永远不会从队列中删除。如果我将$('#image-upload').uploadify('cancel')放在onSelect函数中（我将其作为测试），它就可以了。我也试过像$('img.cancel').live('click', function() { //... });这样的东西，但它也没有被解雇。

还有一些有趣的事情，如果我将$('#image-upload').uploadify('cancel');粘贴到Chrome javascript控制台，而在我的页面上它会以undefined的形式返回。

Answer 1

我有同样的问题，我的解决方案是将处理程序放入Uploadify回调onInit

$('#image-upload').uploadify({
    ...
    'onInit': function () {
         $('img.cancel').live('click', function() { //... });
    }
});

它适用于我，但我实际上不明白，为什么取消不会触发如果处理程序设置在Uploadify

之外

Answer 2

我知道只有当'auto'设置为false时才会触发onCancel - 所以我们只能在上传文件之前看到onCancel运行

Answer 3

我创建了新方法，编辑jquery.uploadify.js

// Create the file data object
        itemData = {
            'fileID'     : file.id,
            'instanceID' : settings.id,
            'fileName'   : fileName,
            'fileSize': fileSize,
            'fullname': file.name // modified by jitheesh 5/1/2017
        }
       // alert(fileName);
        // Create the file item template
        // modified by jitheesh 5/1/2017
        if (settings.itemTemplate == false) {
            settings.itemTemplate = '<div id="${fileID}" class="uploadify-queue-item">\
                <div class="cancel">\
                    <a class="uploadbtn_cancel" rel="${fullname}" href="javascript:$(\'#${instanceID}\').uploadify(\'cancel\', \'${fileID}\')">X</a>\
                </div>\
                <span class="fileName">${fileName} (${fileSize})</span><span class="data"></span>\
                <div class="uploadify-progress">\
                    <div class="uploadify-progress-bar"><!--Progress Bar--></div>\
                </div>\
            </div>';

并在您的信息页中试用此代码

    $('body').on('click', '.uploadbtn_cancel', function () {

       // alert(this.rel);
         $.ajax({
            type: "POST",
            url: "customers.aspx/RemoveFile",
            data: '{fileName: "' + (this.rel).trim() + '"}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function () { },
            failure: function (response) {
                alert(response.d);
            }
        });
    });

Uploadify取消方法没有解雇

3 个答案: