Question

我正在使用http://fineuploader.com/提供的文件上传插件，可从https://github.com/valums/file-uploader/wiki/Releases下载。该插件确实很喜欢拖放，但我只想要一个非常基本的上传器并使用FineUploaderBasic选项。

我希望在表格的每一行上添加一个上传按钮。我的代码如下，现场演示位于http://tapmeister.com/test/fineuploader-3.0/test1.html。上传按钮是每行的第二个图标。

我得到了它，但是，上传可点击区域比上传图标占用的区域大得多。实际上，如果您点击上传图标的左侧或下方，它将触发上传。使用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>

Answer 1

上传对象的容器应该具有相对位置（这可能是可选的）但需要隐藏溢出以防止隐形按钮在容器外呈现。

<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>

也不是必需的，但您应该将上传元素更改为span而不是div。它仍将正常运行，并避免表格单元格内的div的W3C合规性问题。

限制fineuploader上传元素的大小

1 个答案: