javascript - Jquery FileApi 返回打开不是一个函数

Question

我正在使用FileApi (参见用户图片+裁剪演示)在上传之前裁剪图像。但是当我从计算机中选择图像文件时，我收到错误

$(...).modal(...).open is not a function

JS:

     <link href="~/Content/statics/main.css" rel="stylesheet" />
<link href="~/Content/jcrop/jquery.Jcrop.min.css" rel="stylesheet" />

<script src="~/Content/FileAPI/FileAPI.min.js"></script>
<script src="~/Content/FileAPI/FileAPI.exif.js"></script>

<script src="~/Content/jcrop/jquery.fileapi.js"></script>
<script src="~/Content/jcrop/jquery.Jcrop.min.js"></script>

<script src="~/Content/statics/jquery.modal.js"></script>

<script>
    $(document).ready(function () {
        $('#userpic').fileapi({

            url: '@Url.Action("upl","Home")',
            accept: 'image/*',
            imageSize: { minWidth: 200, minHeight: 200 },
            elements: {
                active: { show: '.js-upload', hide: '.js-browse' },
                preview: {
                    el: '.js-preview',
                    width: 200,
                    height: 200
                },
                progress: '.js-progress'
            },
            onSelect: function (evt, ui) {
                var file = ui.files[0];
                if (!FileAPI.support.transform) {
                    alert('Your browser does not support Flash :(');
                }
                else if (file) {
                    debugger;
                    $('#popup').modal({
                        closeOnEsc: true,
                        closeOnOverlayClick: false,
                        onOpen: function (overlay) {
                            $(overlay).on('click', '.js-upload', function () {
                                $.modal().close();
                                $('#userpic').fileapi('upload');
                            });
                            $('.js-img', overlay).cropper({
                                file: file,
                                bgColor: '#fff',
                                maxSize: [$(window).width() - 100, $(window).height() - 100],
                                minSize: [200, 200],
                                selection: '90%',
                                onSelect: function (coords) {
                                    $('#userpic').fileapi('crop', file, coords);
                                }
                            });
                        }
                    }).open();
                }
            }
        });
    });
</script>

这是我的html

<div id="userpic" class="userpic">
    <div class="js-preview userpic__preview"></div>
    <div class="btn btn-success js-fileapi-wrapper">
        <div class="js-browse">
            <span class="btn-txt">Choose</span>
            <input type="file" name="filedata">
        </div>
        <div class="js-upload" style="display: none;">
            <div class="progress progress-success"><div class="js-progress bar"></div></div>
            <span class="btn-txt">Uploading</span>
        </div>
    </div>
</div>

Answer 1

您必须包含模式文件。

请参阅以下 jQuery FileApi 示例:

https://github.com/RubaXa/jquery.fileapi/blob/master/index.html

我看到那里:

<script src="./FileAPI/FileAPI.min.js"></script>
And more files..... And then:
<script src="./statics/jquery.modal.js"></script>