тип ввода HTML5 = "Файл" не вызывает handleFileSelect()

Question

У меня есть этот JS-код для загрузки файла .jpg в firebase:

function handleFileSelect(evt) { 
     var f = evt.target.files[0]; 
     var reader = new FileReader(); 
     reader.onload = (function(theFile) { 
     return function(e) { 
      var filePayload = e.target.result; 
      // Generate a location that can't be guessed using the file's contents and a random number 
      var hash = CryptoJS.SHA256(Math.random() + CryptoJS.SHA256(filePayload)); 
      var f = new Firebase(firebaseRef + 'pano/' + hash + '/filePayload'); 
      spinner.spin(document.getElementById('spin')); 
      // Set the file payload to Firebase and register an onComplete handler to stop the spinner and show the preview 
      f.set(filePayload, function() { 
      spinner.stop(); 
      document.getElementById("pano").src = e.target.result; 
      $('#file-upload').hide(); 
      // Update the location bar so the URL can be shared with others 
      window.location.hash = hash; 
      }); 
     }; 
     })(f); 
     reader.readAsDataURL(f); 
    } 
$(function() { 
    $('#spin').append(spinner); 

    var idx = window.location.href.indexOf('#'); 
    var hash = (idx > 0) ? window.location.href.slice(idx + 1) : ''; 
    if (hash === '') { 
    // No hash found, so render the file upload button. 
    $('#file-upload').show(); 
    document.getElementById("file-upload").addEventListener('change', handleFileSelect, false); 
    } else { 
    // A hash was passed in, so let's retrieve and render it. 
    spinner.spin(document.getElementById('spin')); 
    var f = new Firebase(firebaseRef + '/pano/' + hash + '/filePayload'); 
    f.once('value', function(snap) { 
     var payload = snap.val(); 
     if (payload != null) { 
     document.getElementById("pano").src = payload; 
     } else { 
     $('#body').append("Not found"); 
     } 
     spinner.stop(); 
    }); 
    } 
}); 

Мой JS импорт:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script src="//cdn.firebase.com/v0/firebase.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/spin.js/1.2.7/spin.min.js"></script> 
    <script src="sha256.js"></script> 
    <script src="firepano.js"></script> 

Мои HTML выглядит примерно так:

<input type="file" accept="image/*" capture="camera" id="file-upload"> 

конечно, это только часть, но как-то функция JS не запускается при выборе файла, только если Я помещаю HTML-код за пределы моего файла в отдельный файл и оставляю только этот тег ввода. Есть ли какой-нибудь другой фрагмент кода, который может взаимодействовать в триггере функции selectfile?

Answer 1

Попробуйте это:

<form action="" method="post" enctype="multipart/form-data"> 
    <input type="file" name="image"> 
    <input type="submit" value="Upload"> 
</form>