javascript - 即javascript表单提交文件输入

Question

我有一个带有自定义文件上传字段的 html 表单。我的意思是我已经使用 css 将实际文件字段移到了页面的边界之外，我有一个自定义输入字段和按钮，并且我有一个 jquery click 事件附加到该自定义按钮以触发文件输入对话框。 在每个浏览器中都运行良好。

但是我需要通过javascript提交表单。我到了某个地方，IE 记住我使用 javascript 的操作是对文件输入字段的恶意操作，并在我调用 document.formName.submit( )。

有没有办法解决这个问题，因为我在尝试寻找解决方案时已经完全发疯了。我真的不想使用默认的文件输入字段，因为每个浏览器都以不同的方式呈现它并弄乱了我的设计..

代码:

<form name="thisForm" onsubmit="return false;" enctype="multipart/form-data" method="post" action="index.cfm/somepage">
    <input type="file" class="hidden" name="hidden" id="hidden" />
    <input type="text" name="shown" id="shown" />
    <button id="button">browse..</button>
    <input type="submit" id="submitForm" />
</form>

<script>
    $('button').click(function(){
        $('#shown').val($('#hidden').val());
    });

     $('submitForm').click(function(){
        validateForm();
    });

    function validateForm()
    {
        //regular expression validation against all other input fields in the form
        //not the file input field

        validateVAT();
    }

    function validateVAT()
    {
        //connect to external service to check VAT

        submitForm();
    }

    function submitForm()
    {
        document.thisForm.submit();
    }
</script>

更新: 我只是尝试先上传文件，然后再通过 ajax 提交表单，但这也给了我访问被拒绝的错误。>_>

Answer 1

我遇到了同样的问题，我使用样式化的 <label> 解决了它在 Firefox 中使用轻微的变通方法标记。

http://jsfiddle.net/djibouti33/uP7A9/

目标:

1. 允许用户使用标准的 html 文件输入控件上传文件
2. 隐藏标准 html 文件输入控件并应用自己的样式
3. 用户选择要上传的文件后，自动提交表单

浏览器:

• Firefox、Chrome、IE8/9、Safari
• IE7 无法正常工作，但如果您将其添加到下面详述的解决方法中，它可能会正常工作。

初步解决方案:

1. 通过将文件放置在屏幕外来隐藏文件输入。重要的是不要显示:无，因为某些浏览器不喜欢这样。
2. 向页面添加另一个样式元素(链接、按钮)。
3. 监听对该元素的点击，然后以编程方式将点击发送到文件输入以触发 native “文件浏览器”
4. 监听文件输入的 onchange 事件(在用户选择文件后发生)
5. 提交表格

问题:

1. IE:如果您以编程方式向文件输入发送点击以激活它 (2)，则以编程方式提交表单 (5) 将引发安全错误

解决方法:

1. 同上
2. 通过设置样式利用标签标记中内置的辅助功能(点击标签将激活它的关联控件) 标签而不是链接/按钮
3. 监听文件输入的 onchange 事件
4. 提交表格
5. 出于某种原因，Mozilla 浏览器不会通过单击文件标签来激活文件输入。
6. 对于 Mozilla，监听标签上的点击并将点击事件发送到文件输入以激活它。

希望对您有所帮助!查看 jsfiddle，了解用于使其全部正常工作的 html/js/css 的详细信息。