输入类型的更改不适用于 Google Chrome 和 Safari 浏览器

Question

我正在尝试通过单击按钮更改隐藏到输入类型文件中的输入类型。该代码在 mozilla firefox 和 Internet Explorer 上运行良好，但不适用于 Google Chrome 和 Safari 浏览器。以下是我的代码：

<script type="text/javascript">
function hide()
{
    $(document).ready(function()
    {
        $('#att').hide();
        $('#change').hide();
        $('#change1').hide();
        document.getElementById('fileatt').type='file';

    })
} 
<input type="text" name="att" value="<?php echo $name; ?>" id="att" disabled="disabled" size="12" style="float:left;">
<input name="fileatt" id="fileatt" type="hidden" size="12" style="float:left;">
<input type="button" name="browse" id="change" value="Browse" style="float:left;">
<input type="button" id="change1" value="Change" onclick="hide()">

禁用的文本框保存从数据库中获取的先前值。并添加了值为“浏览”的按钮，使其看起来像输入类型的文件。单击更改按钮时，我希望隐藏文本字段和浏览按钮并显示输入类型文件。在 Firefox 和 Internet Explorer 上一切正常。但我面临的问题是在Chrome和Safari上，文本框和浏览按钮消失成功，但输入类型文件没有出现。

Answer 1

试试这个

$('#fileatt').attr('type', 'file');

代替

document.getElementById('fileatt').type='file';

Answer 2

尝试类似：

function hide()
    {
        $(document).ready(function()
        {
            $('#att').hide();
            $('#change').hide();
            $('#change1').hide();
            $('#fileatt').attr('type', 'file');                //document.getElementById('fileatt').type='file';

        })
    } 

Answer 3

您无法更改input 的type，因此这是无效代码：

document.getElementById('fileatt').type='file';

使用两个元素，隐藏一个并显示另一个，切换它们。

在此处阅读更多信息：
change type of input field with jQuery