Question

我需要通过HTTP Post（表格）将文件发送到多个目的地，只需点击一下。

表单有一个提交按钮

<input type="submit" id="button1" name="submit" value="upload file">

动作属性和所需的各种隐藏字段都是通过JavaScript设置的。

单击button1后，文件将毫无问题地发送到第一个目标。

由于提交按钮，我不可能第二次使用不同的值发送表单。

我不能使用像

这样的外部按钮

<button id="button1">upload file</button>

这会使问题容易解决（我已经尝试过了），但这里不可能。原因是消息最后需要这些行，这些行是由HTML表单中的真实提交按钮生成的：

Content-Disposition: form-data; name="submit"

upload file

我的问题：如何通过包含提交按钮的JavaScript发送表单？如何通过JavaScript“点击”提交按钮？

这是我的Java脚本文件：

// If frame 1 is loaded, the function prepareUpload() will be executed
$("#frame1").ready(function() {  
   prepareUpload();  
}); 


function prepareUpload(){

     // click-handler is registered to button1
     $('#button1').click(function(){
            // if clicked...
            // "Please Wait" window
            $.blockUI({ css: { 
                border: 'none', 
                padding: '15px', 
                backgroundColor: '#000', 
                '-webkit-border-radius': '10px', 
                '-moz-border-radius': '10px', 
                opacity: .5, 
                color: '#fff' 
            } }); 

            //register load handler on iframe which triggers uploadData() 
            $('#frame1').load(function(){
                // reload from iframe
                uploadData();
            });

            iTargetNumber = 0;
            // call function uploadData()
            uploadData();
            return true;
        });
}


function uploadData() {
    var dataSet = data[iTargetNumber];
    document.getElementById("statusbar").style.width = (iTargetNumber / data.length * 200) + "px";

    // if file is uploaded to all servers...
    if (iTargetNumber == data.length) {
       document.getElementById("statustext").innerHTML = "done";
       // Reload browser window
       document.location.reload();
       return;
    }

    // status message
    document.getElementById("statustext").innerHTML = "uploading to " + dataSet.sUrl;

    //set "action" attribute in HTML form    
    $('#form1').attr('action', dataSet.sUrl);

    //set hidden fields in HTML form   
    for (var key in dataSet){
        $('#' + key).attr('value', dataSet[key]);
    }

    // HERE IT HANGS after the first run is completed because of the submit button.

    //submit HTML form with correct values
    $('#form1').submit();

    // increment variable +1
    iTargetNumber++;
}

// initialize variable 
var iTargetNumber = 0;

它在发送第一个表单后挂起（因为提交按钮）。

使用

var myForm = document.forms.form1
var emptyForm = document.createElement('form');
emptyForm.submit.apply(myForm);

insted of

$('#form1').submit();

也没有帮助。生成的消息没有包含这些行：

Content-Disposition: form-data; name="submit"

upload file

其他隐藏字段，例如

<input type="hidden" id="submit" name="submit" value="submit">

会创建 Content-Disposition：form-data; name =“submit”也没有帮助，因为它会在文件内容之前，并且最终不会有上传文件。

=====

问题解决了。解决方案是通过按钮

调用JavaScript功能

<button id="button1">upload file</button>

表单内部也是一个隐藏的提交按钮

<input type="submit" style="display:none" id="button2" name="submit" value="upload file">

JavaScript funktion调用此隐藏的提交按钮。现在，它没有问题。

Answer 1

从另一个表单获取提交方法应该可以解决问题。

var myForm = document.forms.id_of_form;
var emptyForm = document.createElement('form');
emptyForm.submit.apply(myForm);

是否可以通过JavaScript发送包含提交按钮的HTML表单？

1 个答案: