Question

我需要它不在按钮旁边。有没有简单的方法呢？

<input type="file" size="45">

Answer 1

这样的解决方案怎么样

<input type="file" id="selectedFile" style="display: none;" onchange="document.getElementsByTagName('p')[0].innerHTML=this.value;"/>
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />
<p>no file chosen</p>

示例：https://jsfiddle.net/366tjfvn/1/

参考：How to hide text field in Html File Upload

感谢：Ismael Miguel

Answer 2

添加以下代码段：

HTML：

@using (Html.BeginForm("FileUpload", "Admin", FormMethod.Post, new { enctype = "multipart/form-data" }))
            {
                @Html.AntiForgeryToken()
                <label style="width: 33px; display: inline-block;">Path : </label>
                <input type="text" id="UploadTextBox" readonly="readonly" style="display: inline-block; margin-left: 5px; width: 300px; height: 18px; background-color: white;" />
                <input type="file" id="BtnBrowseHidden" name="files" style="display: inline-block; margin-left: 15px;" />
                <label for="BtnBrowseHidden" id="LblBrowse" style="display: inline-block; margin-left: 15px;">
                    Browse
                </label>
                <input type="submit" id="BtnUpload" value="Upload" style="display: inline-block; margin-left: 15px;" />
            }
        <div>
            <label id="ErrorMessage" style="display: none; text-align: center; width: 200px; margin-left: 345px;"></label>
        </div>

Jquery代码：

<script type="text/javascript">
    $(document).ready(function () {
        $('#BtnBrowseHidden').hide();
        $("#BtnBrowseHidden").change(function () {
            var Value = $(this).val();
            $('#UploadTextBox').val(Value);

            if (Value != "") {
                var extesion = /[^.]+$/.exec(Value);
                if (extesion[0] != "xlsx" && extesion[0] != "xls") {
                    //Please upload Excel file.
                    $("#ErrorMessage").html("Please upload Excel file.");
                    $("#ErrorMessage").css('color', 'red');
                    $("#ErrorMessage").show();
                    document.getElementById("BtnUpload").disabled = true;
                }
                else {
                    $("#ErrorMessage").html("");
                    $("#ErrorMessage").hide();
                    document.getElementById("BtnUpload").disabled = false;
                }
            }
            else {
                    $("#ErrorMessage").html("No File choosen.");
                    $("#ErrorMessage").css('color', 'red');
                    $("#ErrorMessage").show();
                 }
            return false;
        });
});
</script>

如何在按钮下面添加“无文件选择”文本

2 个答案: