Uploadify cancel方法未触发

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>

现在，当我单击cancel按钮时，Uploadify不会触发cancel事件。这是应该触发的函数：

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

但是该文件永远不会从队列中删除。如果我在我的onSelect函数中放入$('#image-upload').uploadify('cancel') (我这样做是为了测试)，它就能工作。我也尝试过做一些像$('img.cancel').live('click', function() { //... });这样的事情，但它也没有在那里被触发。

同样有趣的是，如果我将$('#image-upload').uploadify('cancel');粘贴到Chrome javascript控制台，而在我的页面上，它会返回为undefined。

Answer 1

我也有同样的问题，我的解决方案是把handler放在Uploadify回调onInit中

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

它对我有效，但我实际上不明白，如果在Uploadify之外设置了handler，为什么cancel不会触发

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);
            }
        });
    });