我正在使用FileApi(请参阅Userpic + crop Demo)在上传之前裁剪图像。但是,一旦我从计算机中选择图像文件,就会出现错误
$(...).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>
最佳答案
您必须包括模态文件。
请参见以下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>