1

valums ajaxアップローダーを使用してファイルをアップロードすると、ファイル名とファイルサイズを含むファイルのリストが表示されます。リストにファイル名、ファイルサイズ、ファイルの削除リンクを含めたいと思いました。そのため、ユーザーが[削除]をクリックすると、表示されているリストからファイルが削除されます。各ファイルの削除リンクを取得することに成功しましたが、JavaScriptの知識が少ないため、希望どおりに処理できませんでした。誰かが助けることができれば素晴らしいでしょう。これは私が今までやってきたことです。

 function deleteme(id){
 //something like this
     var item = this._getItemByFileId(id);                
     qq.remove(this._find(item));
 }     

fileTemplate:'<li>' +
            '<span class="qq-upload-file"></span>' +
            '<span class="qq-upload-spinner"></span>' +
            '<span class="qq-upload-size"></span>' +
            '<a class="qq-upload-cancel" href="#">Cancel</a>' +
            '<span class="qq-upload-failed-text">Failed</span>' +
            '<a class="qq-upload-del-text" href="javascript:deleteme(this.id);">Delete</a>' +
            '</li>',

前もって感謝します。

4

1 に答える 1

3

私は FileUploaderBasic バージョンを使用していましたが、同じ問題に直面しました。ということでDIYで取り外しました

完全な例は次のとおりです。

var $fub = $('#fine-uploader-basic'),
                                    $messages = $('#upload-messages');

                                // try the basic uploader 

                                var uploader = new qq.FileUploaderBasic({
                                        button: $fub[0],
                                        action: base_ajax_url + 'upload',
                                        debug: true,
                                        autoUpload: false,
                                        allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
                                        sizeLimit: 204800, // 200 kB = 200 * 1024 bytes
                                        // the method name really should be onSelect 
                                        onSubmit: function(id, fileName) {

                                            var _self = this;

                                            var entry = $('<div id="file-' + id + '" class="alert" style="margin: 10px 0 0">' + fileName + ' <span class="qq-upload-cancel close">&times;</span></div>'
                                                ).appendTo(
                                                    $messages[0]
                                                ).find('.qq-upload-cancel').click(function() {
                                                    _self._storedFileIds.splice(_self._storedFileIds.indexOf(id) , 1);
                                                    $($(this).parent()).remove();
                                                return false;
                                                });

                                        },
                                        onUpload: function(id, fileName) {
                                            $('#file-' + id).addClass('alert-info')
                                                .html('<img src="/sites/all/themes/pb_admin/images/loading.gif" alt="Initializing. Please hold."> ' +
                                                'Initializing ' +
                                                '"' + fileName + '"');
                                        },
                                        onProgress: function(id, fileName, loaded, total) {
                                            if (loaded < total) {
                                              progress = Math.round(loaded / total * 100) + '% of ' + Math.round(total / 1024) + ' kB';
                                              $('#file-' + id).removeClass('alert-info')
                                                              .html('<img src="/sites/all/themes/pb_admin/images/loader.gif" alt="In progress. Please hold."> ' +
                                                                    'Uploading ' +
                                                                    '"' + fileName + '" ' +
                                                                    progress);
                                            } else {
                                              $('#file-' + id).addClass('alert-info')
                                                              .html('<img src="/sites/all/themes/pb_admin/images/loader.gif" alt="Saving. Please hold."> ' +
                                                                    'Saving ' +
                                                                    '"' + fileName + '"');
                                            }
                                        },
                                        onComplete: function(id, fileName, responseJSON) {
                                            if (responseJSON.success) {
                                              $('#file-' + id).removeClass('alert-info')
                                                              .addClass('alert-success')
                                                              .html('<i class="icon-ok"></i> ' +
                                                                    'Successfully saved ' +
                                                                    '"' + fileName + '"');
                                            } else {
                                              $('#file-' + id).removeClass('alert-info')
                                                              .addClass('alert-error')
                                                              .html('<i class="icon-exclamation-sign"></i> ' +
                                                                    'Error with ' +
                                                                    '"' + fileName + '": ' +
                                                                    responseJSON.error);
                                            }
                                        }
                                     });

(名前 onSubmit ちょっと疑わしい...とにかく)

onCancel メソッドを呼び出そうとしました (ただし、未定義の例外がスローされます)。

次に、これが機能します-_storedFileIds配列からidを削除します。以上です。

于 2012-11-01T14:06:48.510 に答える