javascript - HTML5输入类型="file"不会触发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">

当然，这只是一部分，但不知何故，只有当我将 HTML 代码放在文件外部的单独文件中并仅保留此输入标记时，当我选择文件时，js 函数才不会触发。是否还有其他代码可以干扰 selectfile 函数触发器？

Answer 1

试试这个:

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