javascript - JS 未捕获错误：上传按钮无效

Question

我正在使用 pandastream 的 js 上传器来上传视频。我在这里关注文档

但是，我收到以下控制台错误：

 Uncaught Error: Invalid upload button. panda-uploader.min.js:112
(anonymous function) panda-uploader.min.js:112
(anonymous function) (index):27

我的 HTML 文件中的相关行是

<script src="//cdn.pandastream.com/u/2.0/panda-uploader.min.js"></script>
<script src="/static/js/jquery-1.10.2.js"></script>
<script type="text/javascript">
var upl = panda.uploader.init({
  'buttonId': 'browse-files',
  'onProgress': function(file, percent) {
    console.log("progress", percent, "%");
  },
  'onSuccess': function(file, data) {
    $("#new_video")
      .find("[name=panda_video_id]")
        .val(data.id)
      .end()
      .submit();
  },
  'onError': function(file, message) {
    console.log("error", message);
  },
});
</script> 

<form action=""  id="video_upload" method="post">
<input type="hidden" name="file_video_id"/>


 <div id="browse-files" class="btn btn-default btn-lg">Choose file</div>
                </form>

我究竟做错了什么？

Answer 1

总脚本必须在html元素之后，由于浏览器读取脚本时浏览器中没有创建元素而发生错误

<form action=""  id="video_upload" method="post">
<input type="hidden" name="file_video_id"/>


<div id="browse-files" class="btn btn-default btn-lg">Choose file</div>
</form>

<script type="text/javascript">
var upl = panda.uploader.init({
  'buttonId': 'browse-files',
  'onProgress': function(file, percent) {
    console.log("progress", percent, "%");
  },
  'onSuccess': function(file, data) {
    $("#new_video")
      .find("[name=panda_video_id]")
        .val(data.id)
      .end()
      .submit();
  },
  'onError': function(file, message) {
    console.log("error", message);
  },
}); 
</script>