1

http://fineuploader.com/から入手でき、 https://github.com/valums/file-uploader/wiki/Releasesからダウンロード可能なファイル アップロード プラグインを使用しています。このプラグインは派手なドラッグ アンド ドロップ機能を備えていますが、私は非常に基本的なアップローダーが必要で、FineUploaderBasic オプションを使用しています。

テーブルの各行にアップロード ボタンを追加したいと考えています。私のコードは以下にあり、ライブ デモはhttp://tapmeister.com/test/fineuploader-3.0/test1.htmlにあります。アップロード ボタンは、各行の 2 番目のアイコンです。

うまくいきましたが、アップロードをクリックできる領域は、アップロードアイコンが占める領域よりもはるかに大きくなっています。実際、アップロード アイコンの左または下をクリックすると、アップロードがトリガーされます。FireBug を使用して DOM を見ると<input type="file" multiple="multiple" name="file" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;">、対象の div 要素内で、アイコンの直後に追加されていることがわかります。

入力のサイズを元のアップロード div やアイコンのサイズと位置に制限するにはどうすればよいですか? ありがとうございました

コード：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Fine Uploader - Basic</title>
        <style>
            #myTable td {width:50px;}
            #myTable div {display:inline;}
        </style>
    </head>

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="fineuploader-3.0.js"></script>
    <script>
        $(document).ready(function() {

            var uploader={
                request: {endpoint: 'server.php'},
                validation: {
                    allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
                    sizeLimit: 204800 // 200 kB = 200 * 1024 bytes
                },
                callbacks: {
                    onSubmit: function(id, fileName) {},
                    onUpload: function(id, fileName) {},
                    onProgress: function(id, fileName, loaded, total) {},
                    onComplete: function(id, fileName, responseJSON) {}
                },
                debug: true
            };

            $('#myTable div.upload').each(function(){
                uploader.button=(this);
                new qq.FineUploaderBasic(uploader);
            })

        });
    </script>

    <body>
        <table id="myTable">
            <tr><td>Col1</td><td><img src="folder.png" alt="folder"><div class="upload" title="upload"><img src="upload.png" alt="upload"></div></td><td>Col3</td></tr>
            <tr><td>Col1</td><td><img src="folder.png" alt="folder"><div class="upload" title="upload"><img src="upload.png" alt="upload"></div></td><td>Col3</td></tr>
            <tr><td>Col1</td><td><img src="folder.png" alt="folder"><div class="upload" title="upload"><img src="upload.png" alt="upload"></div></td><td>Col3</td></tr>
        </table>
    </body>
</html>
4

1 に答える 1

0

アップロードオブジェクトのコンテナは相対的な位置にある必要があります（これはおそらくオプションです）が、非表示のボタンがコンテナの外にレンダリングされないようにするには、オーバーフローを非表示にする必要があります。

<table id="myTable">
    <tr>
        <td>Col1</td>
        <td class="upload-container"><img src="folder.png" alt="folder"><div class="upload" title="upload"><img src="upload.png" alt="upload"></div></td>
        <td>Col3</td>
    </tr>
</table>

<style>
    .upload-container {
        overflow: hidden;
        position: relative;
    }
</style>

また、必須ではありませんが、アップロード要素をdivではなくspanに変更する必要があります。それでも正常に機能し、テーブルセル内のdivのW3Cコンプライアンスの問題を回避します。

于 2013-01-25T19:55:04.767 に答える