Question

我正在做可打印的文档，并且希望用户向其中添加文件。棘手的部分是我不希望在打印文档时出现按钮，而只希望TextField显示文档名称。

是否可以隐藏按钮并仅显示TextField？

Answer 1

无法隐藏按钮并显示TextField。无论如何，您可以复制文档名称的值并在其他TextField上使用它。您可以这样做：

$("#NewTextField").val($('#FileUpload').val().split("\\")[$('#FileUpload').val().split("\\").length - 1]);
$("#FileUpload").hide();

NewTextField是将显示名称的TextField，FileUpload是带有文件的按钮。您只需复制名称的值，然后用“ \”分隔，就可以得到名称，而不是整个路径。

在打印文件时，您可能需要这样做，因此请将代码放入其中：

$("#PrintButton").click(function () {
 //Code above
}

Answer 2

这不是最佳解决方案，但可以完成工作：

$("#FileUpload").change(function () {
        $("#NewTextField").val($('#FileUpload').val().split("\\")[$('#FileUpload').val().split("\\").length - 1]);
    });

input[type="file"]{
    min-width: 0;
    width: 0;
    color: transparent;
    position:relative;
    height: 0;

}
@media print {  
input[type='file'] {
        opacity: 0;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <input type="text" id="NewTextField" disabled><input id="FileUpload" name="document" type="file">
</p>
<p>
 <input name="Print" value="Print" onclick="window.print();" type="button"/>
</p>

现在由您决定...您可以在打印输入时将一些CSS添加到输入中，也可以隐藏按钮打印...

Answer 3

我认为没有开箱即用的解决方案，但有一些像这样的工作：

您可以使用此技术，例如在链接后打印href属性。您可以在用户上传文件时将文件名添加到数据属性中，然后在打印时仅显示数据属性：

@media print{
       input[type=file]{display:none}
       input[type=file]:after {content: attr(data-filename)}
}

您将需要一些将文件名添加到属性data-filename的Javascript

如何隐藏输入类型的文件按钮而不隐藏文本字段？

3 个答案: