应用了 fineuploader 的克隆元素

Question

我将 FineUploader 应用到一个元素，然后克隆它。新元素将打开文件上传对话框，但不会上传文件。如何实现？

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <!-- <script src="/lib/plugins_3rd/fine-uploader-5.2.1/fine-uploader.js" type="text/javascript"></script> -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/file-uploader/3.7.0/fineuploader.js" type="text/javascript"></script>
        <script type="text/javascript"> 
            $(function(){
                $('#mytable').find('tr div.upload').each(function(i,v){
                    console.log(this)
                    new qq.FineUploaderBasic({
                        button: this,
                        request: {
                            endpoint: 'update.php'
                        },
                    });
                });

                $('#add').click(function(){
                    $('#clone').clone(true).removeAttr('id').appendTo('#mytable');
                });

            });
        </script>
        <style type="text/css">
            #clone {display:none;}
        </style> 
    </head>

    <body>
        <table id="mytable">
            <tr id="clone">
                <td class="proposal-td">
                    <div class="upload" title="Upload">
                        <img src="/lib/templates/back/images/upload.png" alt="Upload">
                    </div>
                </td>
            </tr>
            <tr>
                <td class="proposal-td">
                    <div class="upload" title="Upload">
                        <img src="/lib/templates/back/images/upload.png" alt="Upload">
                    </div>
                </td>
            </tr>
        </table>
        <button id="add">Add new</button>

    </body> 
</html>

Answer 1

克隆的元素需要绑定到文件上传按钮，因为 this 仅引用该特定元素。您也不需要重复 HTML 代码。请参阅此工作示例。

HTML

<table id="mytable">
    <tr class="row">
        <td class="proposal-td">
            <div class="upload" title="Upload">Upload</div>
        </td>
    </tr>
</table>
<button id="add">Add new</button>

JS

function bindUploader($element) {
    new qq.FineUploaderBasic({
        button: $element[0],
        request: {
            endpoint: '/echo/json/'
        },
        callbacks: {
           onUpload: function (id, name) {
             alert('uploaded');
           }
        }
    });
    return $element;
}

$(function () {
    bindUploader($('#mytable').find('.upload'));
    var $row = $('#mytable .row').clone(true);
    $('#add').click(function () {
      var $clone = $row.clone(true);
      bindUploader($clone.find('.upload'));
      $clone.appendTo('#mytable');
    });
});

http://jsfiddle.net/moogs/o4z7mtrd/5/

应用了 fineuploader 的克隆元素

Clone element with fineuploader applied to it

javascript

jquery

fine-uploader