Я использовал в своем проекте angular 7 и bootstrap 4.
Я хочу использовать ввод файла Bootstrap, который включает перетаскивание и предварительный просмотр
Я перешел по этой ссылке: http://plugins.krajee.com/file-advanced-usage-demo
Я пытаюсь с этим кодом:
<!DOCTYPE html>
<!-- release v4.3.6, copyright 2014 - 2016 Kartik Visweswaran -->
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>myfile</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="/src/main/webapp/assets/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container kv-main">
<div class="page-header">
<h1>Bootstrap File Input Example</h1>
</div>
<form enctype="multipart/form-data">
<input id="upload" class="file" type="file" multiple data-min-file-count="1">
<br>
</form>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/src/main/webapp/assets/js/fileinput.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$("#upload").fileinput({
//
});
</script>
</html>
, но после запуска приложения я не нашел правильный компонент загрузки.
обычно результат должен быть таким :
Я думаю, что проблема связана с fileinput.js и fileinput.css , у которых есть проблемы, но с хромом у меня не было проблем с загрузкой этих файлов.
структура проекта:
src\main\webapp\assets
js
css
или проблема связана с конфликтом с моей средой.
это код в package.json чтобы указать, есть ли у меня конфликт
{
"name": "myApp",
"version": "2.4.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@agm/core": "1.0.0-beta.5",
"@angular/animations": "7.0.3",
"@angular/common": "7.0.3",
"@angular/compiler": "7.0.3",
"@angular/core": "7.0.3",
"@angular/forms": "7.0.3",
"@angular/http": "7.0.3",
"@angular/platform-browser": "7.0.3",
"@angular/platform-browser-dynamic": "7.0.3",
"@angular/router": "7.0.3",
"@fortawesome/angular-fontawesome": "0.3.0",
"@fortawesome/fontawesome-svg-core": "1.2.8",
"@fortawesome/free-solid-svg-icons": "5.5.0",
"@ng-bootstrap/ng-bootstrap": "3.3.1",
"@swimlane/ngx-charts": "9.0.0",
"@swimlane/ngx-datatable": "13.1.0",
"angular-2-dropdown-multiselect": "1.8.1",
"angular-calendar": "0.25.2",
"angular-in-memory-web-api": "0.6.1",
"angular-resizable-element": "3.2.2",
"bootstrap": "4.1.3",
"bootstrap-fileinput": "^4.5.2",
"bs-custom-file-input": "^1.3.1",
"classlist.js": "1.1.20150312",
"core-js": "2.5.7",
"d3": "5.7.0",
"date-fns": "1.29.0",
"flag-icon-css": "3.2.1",
"font-awesome": "4.7.0",
"intl": "1.2.5",
"jquery": "3.3.1",
"leaflet-map": "0.2.1",
"ng-jhipster": "0.5.6",
"ng2-ckeditor": "1.2.2",
"ng2-completer": "2.0.8",
"ng2-dragula": "2.1.1",
"ng2-smart-table": "1.3.5",
"ng2-validation": "4.2.0",
"ngx-cookie": "2.0.1",
"ngx-infinite-scroll": "6.0.1",
"ngx-pagination": "3.2.1",
"ngx-perfect-scrollbar": "6.3.1",
"ngx-toastr": "8.9.1",
"ngx-webstorage": "2.0.1",
"popper.js": "1.14.4",
"rxjs": "6.3.3",
"rxjs-compat": "6.3.3",
"web-animations-js": "2.3.1",
"widgster": "1.0.0",
"zone.js": "0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.10.0",
"@angular/cli": "^7.0.5",
"@angular/compiler-cli": "7.0.3",
"@angular/language-service": "7.0.3",
"@types/jasmine": "2.8.9",
"@types/jasminewd2": "2.0.5",
"@types/node": "10.12.0",
"angular-ide": "^0.9.52",
"codelyzer": "4.5.0",
"generator-jhipster": "5.7.0",
"jasmine-core": "3.2.1",
"jasmine-spec-reporter": "4.2.1",
"karma": "3.1.0",
"karma-chrome-launcher": "2.2.0",
"karma-coverage-istanbul-reporter": "2.0.4",
"karma-jasmine": "1.1.2",
"karma-jasmine-html-reporter": "1.3.1",
"protractor": "5.4.1",
"ts-node": "7.0.1",
"tslint": "5.11.0",
"typescript": "3.1.6"
}
}