JQuery Clone方法在IE浏览器中失效问题求助

咱先搞清楚为啥Chrome和Firefox能正常实现，IE却掉链子——这货出于安全考虑，直接禁止脚本修改<input type="file">的value属性，也不允许克隆带选中文件的file元素来继承选中状态，怕恶意脚本乱搞用户本地文件。那怎么绕开这个限制呢？分情况给你唠唠：

一、针对IE10及以上版本（支持File API） #

IE10+总算支持了File API，咱可以读取原文件输入框的文件信息，用「模拟显示+共享文件数据」的方式实现需求：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(function() {
            $('#cloneBtn').click(function() {
                const originalInput = $('#file1')[0];
                // 判断是否支持File API
                if (window.File && window.FileList && originalInput.files.length > 0) {
                    const selectedFile = originalInput.files[0];
                    // 创建新的file输入框
                    const newInput = $('<input type="file" id="file2" style="margin-left:10px;">');
                    $('body').append(newInput);
                    
                    // 模拟显示选中文件名（让UI看起来和真实选中状态一致）
                    const fileNameDisplay = $('<span style="margin-left:5px;">已选中：' + selectedFile.name + '</span>');
                    $('body').append(fileNameDisplay);

                    // 提交时直接共享原文件数据，比如存入FormData
                    const formData = new FormData();
                    formData.append('file1', selectedFile);
                    formData.append('file2', selectedFile);
                    // 后续用ajax提交这个formData即可
                }
            });
        });
    </script>
</head>
<body>
    <input type="file" id="file1">
    <button id="cloneBtn">生成第二个文件选择框</button>
</body>
</html>

二、针对IE9及以下版本（完全不支持File API） #

这老版本限制更严，连File API都没有，咱只能放弃「真实复制file input」的想法，改用「模拟UI展示+复用原input提交」的方案：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(function() {
            $('#cloneBtn').click(function() {
                const originalInput = $('#file1')[0];
                const originalValue = originalInput.value;
                if (originalValue) {
                    // 提取文件名（IE9及以下只能拿到完整路径，截取最后一段）
                    const fileName = originalValue.split('\\').pop();
                    // 创建模拟的选中状态展示框，样式对齐真实file input
                    const fakeInput = $('<div style="border:1px solid #ccc; padding:3px 8px; display:inline-block; margin-left:10px;">' + fileName + '</div>');
                    $('body').append(fakeInput);

                    // 提交时直接用原file input的文件，不需要新input
                    // 表单提交的话，直接提交包含原input的表单即可
                }
            });
        });
    </script>
</head>
<body>
    <input type="file" id="file1">
    <button id="cloneBtn">生成第二个文件选择框</button>
</body>
</html>

通用最优方案：用文件列表管理替代复制input #

如果你的需求本质是要多份相同文件提交，或者展示已选文件，其实没必要执着于复制file input，直接用数组管理选中的文件，UI上只展示文件名，提交时统一用FormData发送就行，这种方式全浏览器兼容：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        const selectedFiles = [];
        $(function() {
            // 监听原input的选择事件
            $('#file1').change(function() {
                const files = this.files;
                if (files.length > 0) {
                    selectedFiles.push(files[0]);
                }
            });

            $('#addBtn').click(function() {
                // 重新渲染所有选中文件的展示
                $('.file-display').empty();
                selectedFiles.forEach((file, index) => {
                    const fileName = file.name || file.value.split('\\').pop();
                    $('.file-display').append(`<p>文件${index+1}：${fileName}</p>`);
                });

                // 准备提交的FormData
                const formData = new FormData();
                selectedFiles.forEach((file, index) => {
                    formData.append(`files[${index}]`, file);
                });

                // 发起ajax提交（示例）
                /*
                $.ajax({
                    url: '你的提交地址',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: res => {
                        console.log('提交成功');
                    }
                });
                */
            });
        });
    </script>
</head>
<body>
    <input type="file" id="file1">
    <button id="addBtn">添加到已选列表</button>
    <div class="file-display"></div>
</body>
</html>

说白了，IE的安全限制绕不开，咱只能换个思路，用「模拟展示+共享数据源」的方式达到类似效果，既满足需求又不碰浏览器的安全红线。

内容的提问来源于stack exchange，提问作者kahoona