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

私は同じ問題を抱えています。私にとっての解決策は、ハンドラーを 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 に答える