2

这听起来很简单，但我找不到 Blueimp jQuery File Upload 的代码示例，它使浏览器的默认文件输入框（显示“选择文件...”和浏览的那个）元素隐藏，而是通过按钮触发对话框. 有人可以告诉我如何做到这一点吗？

我尝试将输入元素放在按钮元素中，如本演示中所示，但它在 Firefox 上不起作用。有没有办法使用 jQuery 来触发对话框。我不太确定为什么这在 Chrome 中有效，除了“浏览”按钮恰好与 Chrome 中的按钮对齐但在 FF 中没有。

这就是我想要做的事情：

<button id="upload-button" class="btn btn-primary btn-large" type="button"> <input type="file" name="image" id="fileupload" multiple data-url=""/> Upload Images
</button><br>

4

3 回答 3

5

将按钮元素更改为跨度（并将其样式设置为按钮），就像在插件的演示页面上一样。

于 2013-11-14T23:58:21.183 回答
2

听起来你在这里问了几个问题，所以我会尝试解决它们。

  1. 隐藏默认输入 - 在这里的示例页面上，您可以看到他的 CSS 负责隐藏默认文件输入元素：

    .fileinput-button input { cursor: pointer; direction: ltr; font-size: 23px; margin: 0; opacity: 0; position: absolute; right: 0; top: 0; transform: translate(-300px, 0px) scale(4); }

  2. 如何触发 - 至少有两种方法可以做到这一点：

    2.1像这样的基本实例化：$('#fileupload').fileupload();

    2.2 务实地通过绑定到另一个事件，在本例中为更改事件：

    $('#some-file-input-field').bind('change', function (e) { $('#fileupload').fileupload('add', { fileInput: $(this) }); });

    该示例也可以在API上找到

于 2013-03-07T14:46:34.460 回答
0

一旦选择文件将开始上传

$('#fileupload').fileupload({
    dataType: 'json',
    url: '<?php echo base_url(); ?>asset/applicant/blueimp/server/php/',
    add: function (e, data) {
        //Renaming files name
        var count = data.files.length;
        var i;
        for (i = 0; i < count; i++) {
            data.files[i].uploadName =
                Math.floor(Math.random() * 1000) + '_' + data.files[i].name;
        }
        data.submit();
    }
});

触发按钮上传文件

$('#fileupload').fileupload({
        dataType: 'json',
        url: '<?php echo base_url(); ?>asset/applicant/blueimp/server/php/',
        add:function (e, data) {
           $("#uploadBtn").off('click').on('click',function () {           
             data.submit();
           });
        }
    });

尝试将插件保留在 jquery 文档就绪函数中，以避免出现意外的 jquery 错误，如下所示

$(document).ready(function () {
    $('#fileupload').fileupload({
      //....
    });
});
于 2018-09-27T04:25:30.987 回答