2

我正在使用 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.

4

3 回答 3

0

我知道只有在将“auto”设置为 false 时才会触发 onCancel - 所以我们可以看到 onCancel 仅在文件上传之前运行

于 2014-04-10T16:40:34.563 回答
0

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

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

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

于 2013-09-17T07:06:30.147 回答
0

我创建了新方法，编辑 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);
            }
        });
    });
于 2017-01-05T06:46:42.067 回答