AJAX загрузка файлов на обмен, в отличие от onsubmit

Question

Я использую следующий код для создания 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

Укажите для элемента ввода файла идентификатор и:

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

Answer 3

Я думаю, что-то вроде .live () , надеюсь, решит вашу проблему, прокомментируйте, если хотите больше информации о том, как его использовать ...