Question

有使用BlueImp的Jquery FileUpload插件的经验的人

使用Razor / C＃/ MVC / Blueimp的Jquery FileUpload，jqueryUI版本

所以我希望图像成为我的“选择文件”按钮。我将输入包装在<span class="fileinput-button">中，而不是使用按钮元素，我使用img元素。它似乎工作，拉起文件选择对话框，设置输入的值就好了。所以我调整输入大小以匹配图像大小。到目前为止一切都很好。

我注意到指针很有趣，所以我检查了元素，发现实际上有两个输入框在彼此顶部。一个是完美的，正好在img ...但第二个是像139px到33px并且也坐在图像上（左上对齐）但是

我使用了inspect-element，突出显示了每个输入，它们都导致代码中的相同位置...这是我无法弄清楚的，我检查元素，突出显示139px输入，它带我到这里54px元素......他们都在这里领先。

<span class="fileinput-button">
  <img class="clickable" src="~/Images/section/section49.png" width="54" height="54">
  <input type="file" name="file" value="" style="height:54px; width: 54px;">
</span>

还有其他人跑过这个吗？

我知道这不是很多，但代码非常简单。我能想到的唯一其他信息是1.跨度是在一个表格单元格内，而2.所有这些都是在一个模态对话中......不要认为这很重要...让我知道是否有任何信息为清楚起见，需要额外的信息。

感谢

（只是为了帮助想象，下面的图片是Chrome突出显示139px宽的元素...点击它导致上面54px宽的元素。我从未见过元素检查器这样做。没有CSS在可能影响这个的列表可能与blueimp插件的行为方式有关吗？）

highlight reveals a second input

Answer 1

这是我做的事情：

试图在模态中多次尝试使用JQueryFileUpload插件的“fileinput-button”跨度

相反，我在每个图像上放了一个class =“clickable”，添加了一个带有我需要的额外信息的数据属性。然后将click事件附加到每个“可点击”类并手动触发插件的输入...从那里，JQueryFileUpload插件接管并正常运行。

在插件的表单部分中，看起来通常是

<input id="file" type="file" name="file" value=""/>

按钮打开包含多个插槽的模式，用户单击图像（表示将上载文件的插槽）。

<img class="clickable" data-asset-type="@AssetType.Slot23" src=...etc

因为模式是从插件所在的页面呈现的，所以我可以使用jquery将信息扔到插件中，让它像平常一样处理事情

$(".clickable").click(function () {
        var assetType = $(this).attr('data-asset-type');
        $('input[name="AssetType"]').val(assetType); // the hidden field
        $('#modal-container').fadeOut(300);
        $('input#file').click();
        return false;
    });

结果是一个模态窗口，其中包含多个文件上传按钮，这些按钮全部通过从模态窗口获取的数据发回一个点。一旦用户选择了一个文件，JQFileUpload将正常运行，显示队列中的文件以及插件提供的所有优秀附加功能。

jquery fileupload输入框加倍

1 个答案: