Question

我正在使用BlueImp JS库进行XHR文件上传，但我找不到我需要的示例。

我想要的是在自定义按钮/链接点击上隐藏文件输入字段和打开文件选择对话框。我不知道在onclick事件中要写什么来打开文件选择器。像这样：

<input type="file" name="file" style="display: none;" />
<input type="button" value="Select file" onclick="?" />

以下是他们网站最简单的例子：

<span class="btn btn-success fileinput-button">
    <i class="icon-plus icon-white"></i>
    <span>Select files...</span>
    <!-- The file input field used as target for the file upload widget -->
    <input id="fileupload" type="file" name="files[]" multiple>
</span>

这里有一些巫术魔法，它会转换为按钮，可以满足我的需要。

更新：我找到了this链接，这解释了我想要做的事情是不可能的。无论如何，有人可以提供一个如何在不使用Bootstrap CSS框架的情况下设置文件上传按钮样式的示例吗？

更新2：我设法创建了这样的工作示例：

<span class="fileinput-button">
    <span class="btnMediumOrange">Select file...</span>

    <input type="file"
           name="edt_avatar">
</span>

.fileinput-button
{
    position: relative;
    overflow: hidden;
}

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

.btnMediumOrange
{
    border: none;

    background-image: url('../img/buttons/bg-medium-orange.png');

    font-weight: bold;

    width: 123px;
    height: 28px;

    cursor: pointer;
}

...但按钮看起来不太正确，忽略宽度和高度值。

需要简单的BlueImp jQuery文件上传示例

0 个答案: