提供的值不是'FileList'类型的

Question

我正在尝试使用以下代码将图像上传和裁剪为人像：

<input type="hidden" name="_token" value="CzK6peomC6Pnnqdm4NsxpdGSH6v1evDnbN12oL" >

选择图片后，报告错误：

{% load staticfiles %}
<link rel="stylesheet" href="{% static 'css/imagecrop.css' %}"/>
<div class="container">
  <div class="imageBox">
    <div class="thumbBox"></div>
    <div class="spinner" style="display: none"></div>
  </div>
  <div class="action">
    <!-- <input type="file" id="file" style=" width: 200px">-->
    <div class="new-contentarea tc"> <a href="javascript:void(0)" class="upload-img">
      <label for="upload-file">Select an image...</label>
      </a>
      <input type="file" class="" name="upload-file" id="upload-file" />
    </div>
    <input type="button" id="btnCrop" class="Btnsty_peyton" value="OK">
    <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+"  >
    <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" >
  </div>
  <div class="cropped"></div>
</div>
<script src="{% static 'js/jquery-1.11.1.min.js' %}"></script>
<script src="{% static 'js/cropbox.js' %}"></script>
<script src="/static/js/jquery-csrf.js"></script>
<script >

    $(window).load(function() {
        var options =
        {
            thumbBox: '.thumbBox',
            spinner: '.spinner',
            imgSrc: ''
        }
        var cropper = $('.imageBox').cropbox(options);
        var img="";
        $('#upload-file').on('change', function(){
            var reader = new FileReader();
            reader.onload = function(e) {
                options.imgSrc = e.target.result;
                cropper = $('.imageBox').cropbox(options);
                getImg();
            };
            reader.readAsDataURL(this.files[0]);
            this.files = [];
            //getImg();
        })
        $('#btnCrop').on('click', function(){
            alert("uploading...");
            // $.ajax({
            //  url:'{% url "account:portrait" %}',
            //  type:'POST',
            //  data:{"img":img},
            //  success:function(e){
            //      location.href ="{% url 'account:profile' %}"
            //  },
            // });
        })
    function getImg(){
        img = cropper.getDataURL();
        $('.cropped').html('');
        $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');
        $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');
        $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');
        }

    $(".imageBox").on("mouseup",function(){
        getImg();
        });


    $('#btnZoomIn').on('click', function(){
        cropper.zoomIn();
    })
    $('#btnZoomOut').on('click', function(){
        cropper.zoomOut();
    })
});
</script>

错误显示为：

及其详细信息：

如何处理此类问题？