AJAX文件上传onchange，而不是onsubmit - AJAX file upload onchange as opposed to onsubmit

AJAX file upload onchange as opposed to onsubmit

本文关键字：onsubmit onchange 文件 AJAX | 更新日期: 2023-09-27

我使用下面的代码来影响一个iframe，它允许在提交表单时上传ajax文件而不刷新。

正常运行

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

我想做的是同样的事情，但' onchange '的文件字段输入，即当用户选择了一个文件，自动触发init()功能，从而上传文件。我试过下面的代码:

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

这不起作用，我完全卡住了。什么好主意吗?

多谢

应该可以了

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

我认为。live()之类的东西有望解决你的问题，如果你想了解更多关于如何使用它的信息，请评论…

给文件输入元素一个id和:

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