Question

我创建了一个HTML和jQuery代码来提交带有jQuery的表单，它可以在除Internet Explorer之外的所有浏览器中使用。

HTML：

<form name="file_upload" id="file_upload" action="<?php echo base_url(); ?>projects/file" enctype="multipart/form-data" method="POST">
    <a class="button" onclick="document.getElementById('file-upload-input').click(); return false;"><span class="plus"></span>Upload File</a> 
    <input id="file-upload-input" name="upload" type="file" style="display:none;">
    <input id="submit-button" name="submit" type="submit" value="Upload" style="display:none;">
</form>

的jQuery

$(document)
.on('change', '#file-upload-input', function(){
    $('#submit-button').click();
})

编辑：我也试过了：

$(document)
.on('change', '#file-upload-input', function(){
    $("#file_upload").submit();
})

但输入提交仅在Internet Explorer中提交表单。

Answer 1

试试这个。

$(document)
.on('change', '#file-upload-input', function(){
    $("#file_upload").submit();
})

Answer 2

更改：

$('#submit-button').click();

为：

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

应该这样做。

Answer 3

在IE中使用委托事件方法和“更改”事件时可能会遇到问题（因为它不支持冒充哪些事件委托依赖）。

尝试将onchange处理程序直接绑定到文件输入：

$('#file-upload-input').on('change', function(){
    $("#file_upload").submit();
})

Answer 4

我认为这是事件传递限制了javascript触发的一些操作。因此，您应该始终使用浏览器触发的原始事件。在您的情况下，我们可以使用css将文件上传输入设置为透明并将其覆盖到“a”按钮：

<input id="file-upload-input" name="upload" type="file" style="
width: 88px;
position: absolute;
left: 0;
opacity: 0;
filter:alpha(opacity=0)
">

如果这样做，您可以删除绑定到“a”节点</ p>的onclick事件

输入提交没有在Internet Explorer中使用jquery提交表单

4 个答案: