Question

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

我尝试将输入元素放在按钮元素中，如this demo所示，但它不适用于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>

Answer 1

将按钮元素更改为范围（并将其设置为按钮），就像在插件的demo page上一样。

Answer 2

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

隐藏默认输入 - 在示例页面here上，您可以看到他的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.1基本实例化like so：$('#fileupload').fileupload();

2.2通过绑定到另一个事件来实际操作，在这种情况下是一个更改事件：

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

这些例子也可以在the API

Answer 3

选择文件后，便会开始上传

$('#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({
      //....
    });
});

Blueimp jQuery文件上传按钮触发

3 个答案: