即javascript表单提交文件输入 [英] ie javascript form submit with file input

问题描述

我有一个html表单，带有自定义文件上传字段。由此我的意思是我已经将实际的文件字段移动到了使用css的页面边界之外，我有一个自定义的输入字段和按钮，并且我有一个附加到该自定义按钮的jquery点击事件来触发文件输入对话框。
在所有浏览器中都可以正常工作。

但我需要通过javascript提交表单。并且我得到了一个地方，IE浏览器记住我的行为与JavaScript作为恶意操纵文件输入字段，并阻止我访问错误访问被拒绝当我调用 document.formName.submit（）。

有没有办法解决这个问题，因为我试图搜索寻求解决方案。我真的不想使用默认的文件输入字段，因为每个浏览器都以不同的方式呈现它，并弄乱了我的设计。

code：

 < form name =thisFormonsubmit =return false; enctype =multipart / form-datamethod =postaction =index.cfm / somepage> 
< input type =fileclass =hiddenname =hiddenid =hidden/> 
< input type =textname =shownid =shown/> 
< button id =button>浏览..< / button> 
< input type =submitid =submitForm/> 
< / form> 
 
< script> $（'＃hidden'）。val（））; 
}）
 $（'button'）。click（function（）{
 $（'＃shown'）。 ; 
 $ b $（'submitForm'）。click（function（）{
 validateForm（）; 
}）; 
 
函数validateForm（）
 {
 //对所有其他输入字段进行正则表达式验证
 //不是文件输入字段
 
 validateVAT（）; 
 
 
函数validateVAT（）
 {
 //连接到外部服务来检查增值税
 
 submitForm（）; 
 
 
函数submitForm（）
 {
 document.thisForm.submit（）; 
} 
< / script> 
  

更新：
我刚刚尝试首先上传文件，在提交表单之前，通过ajax，但是这也给了我拒绝访问的错误。> __解决方案

回答自己，经过2天的疯狂试用和错误。我希望我可以帮助这个人..

我从我的coldfusion页面中删除隐藏的文件输入字段，并用iframe代码替换它。该iframe标签链接到另一个coldfusion页面，其中包含另一个带有已删除文件输入字段的表单。
现在，当我使用javascript来点击文件输入字段，该字段仍然隐藏在视图中时，它仍然会给浏览文件对话框留下顺手。但是，当我使用javascript通过iframe提交表单时，它奇迹般地提交了iframe中的表单，从而可以在某些服务器端脚本中上传文件。

iframe code：

 < form id =formFileUploadclass =formFileUploadname =formFileUploadmethod =postaction =../ actions / act_upload_file.cfmautocomplete =offenctype =multipart / form-data> 
< input type =fileclass =buttonFileHiddenid =inputFilename =partnersLogo/> 
< / form> 
  

iframe本身：

 < iframe src =admin / dsp_file_upload.cfmid =ifuname =ifuclass =buttonFileHidden> 
< / iframe> 
  

javascript click&提交：

  ifu.document.formFileUpload.partnersLogo.click（）; 
 ifu.document.formFileUpload.submit（）; 
  

I have a html form, with a custom file upload field. And by that I mean that I have moved the actual file field beyond the borders of the page with css, that I have a custom input field and button in place, and that I have a jquery click event attached to that custom button to trigger the file input dialog. It all works fine, in every browser.

But I need to submit the form through javascript. And I got somewhere that IE remembers my actions with javascript as a malicious manipulation of the file input field and blocks my access with an error "access denied" when I invoke document.formName.submit().

Is there a way around this, because I have gone completely mad by trying to search for a solution. I seriously don't want to use the default file input field, as every browsers renders it differently and messes up my design..

code:

<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>

UPDATE: I just tried to first upload the file, before submitting the form, through ajax, but that also gave me the acces denied error.. >_>

解决方案

I found the answer myself, After 2 days of crazy trial&error. I hope I can help somebody with this..

I removed the hidden file input field from my coldfusion page and replaced it by an iframe tag. That iframe tag linked to another coldfusion page, containing another form with the removed file input field. Now when I use javascript to click the file input field, which is still hidden from view, it still gives the browse file dialog without a hitch. But when I use javascript to submit the form, through the iframe, miraculously, it submits the form in the iframe, making it possible to upload the file in some serverside scripting of your preference.

iframe code:

<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 itself:

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

javascript click & submit:

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

这篇关于即javascript表单提交文件输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！