Question

我正在使用以下代码来实现iframe，该iframe允许在提交表单时上传ajax文件而不刷新。

这可以按预期工作

window.onload=init; 
function init() {
document.getElementById('form').onsubmit=function() {
    document.getElementById('form').target = 'iframe'; 
            }
        }

我想做的是同样的事情，但文件字段输入的“onchange”，即当用户选择了一个文件时，自动触发init()函数，从而上传文件。我试过这段代码：

document.getElementById('file').onchange=function(){...

这不起作用，我完全卡住了。有什么想法吗？

非常感谢

Answer 1

这应该对你有用

<script type="text/javascript">

window.onload = function() {

    // add old fashioned but reliable event handler
    document.getElementById('file_input').onchange = function() {
        // submit the form that contains the target element
        this.form.submit();
    }
}

</script>

<iframe name="my_iframe"></iframe>

<form target="my_iframe"
      action="your/file.ext"
      method="post"
      enctype="multipart/formdata">

    <input type="file" name="my_file" id="file_input">

    <!-- for no js users -->
    <noscript>
        <br/>
        <input type="submit">
    </noscript>

</form>

Answer 2

我觉得像.live()之类的东西会有希望解决你的问题，如果你想了解更多关于如何使用它的信息，请发表评论......

Answer 3

为文件输入元素指定一个id并：

$(document).ready(function(){
  $(element).change(function(e){
    fileInfo = e.currentTarget.files[0];
    init();
  });
});

AJAX文件上传onchange而不是onsubmit

3 个答案: