即javascript表单提交文件输入

Question

我有一个html表单,带有自定义文件上传字段.我的意思是我已经用css将实际文件字段移到了页面边框之外,我有一个自定义输入字段和按钮,并且我有一个附加到该自定义按钮的jquery click事件来触发文件输入对话框.在每个浏览器中一切正常.

但我需要通过javascript提交表单.而且我得到了某个地方,IE记得我用javascript作为对文件输入字段的恶意操纵,并"access denied"在我调用时阻止我的访问错误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. 通过将其放在屏幕外来隐藏文件输入.重要的是不要显示:none,因为有些浏览器不喜欢这个.
2. 向页面添加另一个样式元素(链接,按钮).
3. 听取对该元素的单击,然后以编程方式将单击发送到文件输入以触发本机"文件浏览器"
4. 侦听文件输入的onchange事件(在用户选择文件后发生)
5. 提交表格

问题:

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

解决方案解决方案:

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

希望这可以帮助!查看jsfiddle,了解用于完成所有工作的html/js/css的详细信息.

Answer 2

我自己找到了答案,经过2天的疯狂试验和错误.我希望我可以帮助这个人..

我从coldfusion页面中删除了隐藏文件输入字段,并将其替换为iframe标记.iframe标记链接到另一个coldfusion页面,包含另一个带有已删除文件输入字段的表单.现在,当我使用javascript单击仍然从视图中隐藏的文件输入字段时,它仍然提供了浏览文件对话框.但是当我使用javascript提交表单时,通过iframe,奇迹般地,它在iframe中提交表单,从而可以在您偏好的某些服务器端脚本中上传文件.

iframe代码:

<form id="formFileUpload" class="formFileUpload" name="formFileUpload" method="post" action="../actions/act_upload_file.cfm" autocomplete="off" enctype="multipart/form-data">
    <input type="file" class="buttonFileHidden" id="inputFile" name="partnersLogo" />
</form>

iframe本身:

<iframe src="admin/dsp_file_upload.cfm" id="ifu" name="ifu" class="buttonFileHidden">
</iframe>

javascript点击并提交:

ifu.document.formFileUpload.partnersLogo.click();
ifu.document.formFileUpload.submit();

Answer 3

如果你像我一样,并且你不想使用iframe,并且你不太热衷于上面提到的标签解决方案,你可以将原始按钮放在样式按钮上方,不透明度为0.

使用上面的示例,您仍然可以:

<input type="file" class="hidden" name="hidden" id="hidden" />
<input type="button" name="shown" id="shown" value="Add File" />

但是.hidden会这样定义:

.hidden {
  position: absolute;
  left: -150px;
  opacity: 0;
  filter: alpha(opacity=0);
}

配置:将不透明度设置为0.5(或= 50)以查看透明元素并调整左侧定位.

可以说就像上面的答案一样hacky,但是一个引导友好的解决方案,在我的情况下,唯一有效的解决方案.