2

画像プレビュー付きのFineアップローダー、ajaxアップローダーを使用しています。Fine Uploader Basic モードを使用していません。

削除リンクを移動するにはどうすればよいですか

<a class="qq-upload-delete" href="#" style="display: inline;">Delete</a>

from <ul class="qq-upload-list">to<li id="thumb">が画像を囲んでいます。

<script>
  $(document).ready(function() {
    $('#thumbnail-fine-uploader').fineUploader({
      request: {
        endpoint: 'includes/example.php'
      },
        deleteFile: {
        enabled: true,
        forceConfirm: true
      },
      multiple: false,
      validation: {
        allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
        sizeLimit: 51200 // 50 kB = 50 * 1024 bytes
      },
      text: {
        uploadButton: 'Dodajte sliku',
        deleteButton: ' '
      }
    }).on('complete', function(event, id, fileName, responseJSON) {

        if (responseJSON.success) {
          $(this).append('<li id="thumb"><img src="img/success.jpg" alt="' + fileName + '"></li>');
      }
    });
  });
</script>

これを達成したいので、アップロードリストではなく、すべての画像の横に削除リンクがあります。

4

1 に答える 1

1

ファイル アイテムの削除アンカー機能の方法により、削除リンクの再ペアレント化はおそらくここでは機能しません。

代わりに、独自の削除ボタンを作成してみませんか? コールcompleteバック ハンドラは次のようになります。

.on('complete', function(event, id, fileName, response) {
   if (response.success) {
       var $deleteEl = $('<a href="#">Delete</a>');

      //when you delete element is clicked, call the "deleteFile" API method, passing in that file's ID
      $deleteEl.click(function() {
         $('#thumbnail-fine-uploader').fineUploader('deleteFile', id);
      });

      $(this).append('<li id="thumb"><img src="img/success.jpg" alt="' + fileName + '"></li>')
             .append($deleteEl);
   }
});

もちろん、アプリケーションのスタイルに合わせて削除アンカー HTML を調整できます。

于 2013-04-25T18:44:51.583 に答える