부트스트랩 4 파일 입력에 파일 이름이 표시되지 않음
Bootstrap 4의 사용자 지정 파일 입력 클래스에 문제가 있습니다. 파일 이름을 업로드할 파일을 선택한 후 표시되지 않습니다.
다음 코드를 사용합니다.
<div class="input-group mb-3">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile02">
<label class="custom-file-label" for="inputGroupFile02">Choose file</label>
</div>
<div class="input-group-append">
<button class="btn btn-primary">Upload</button>
</div>
</div>
너무 복잡해지지 않고 어떻게 고칠 수 있는지 아세요?
선택한 파일의 이름을 문서에 기록된 대로 표시하려면 Javascript를 사용해야 합니다. https://getbootstrap.com/docs/4.5/components/forms/ #file-messages
여기에서 솔루션을 찾을 수 있습니다.부트스트랩 4 파일 입력
다음은 예제의 코드입니다.
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="input-group mb-3">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile02"/>
<label class="custom-file-label" for="inputGroupFile02">Choose file</label>
</div>
<div class="input-group-append">
<button class="btn btn-primary">Upload</button>
</div>
</div>
<script>
$('#inputGroupFile02').on('change',function(){
//get the file name
var fileName = $(this).val();
//replace the "Choose a file" label
$(this).next('.custom-file-label').html(fileName);
})
</script>
</body>
</html>
저는 같은 용도로 다음을 사용했습니다.
<script type="application/javascript">
$('input[type="file"]').change(function(e){
var fileName = e.target.files[0].name;
$('.custom-file-label').html(fileName);
});
</script>
Anuja Patil의 답변은 한 페이지의 단일 파일 입력에서만 작동합니다.이것은 둘 이상인 경우에 작동합니다.또한 이 스니펫은 다음과 같은 경우 모든 파일을 표시합니다.multiple활성화됩니다.
<script type="text/javascript">
$('.custom-file input').change(function (e) {
var files = [];
for (var i = 0; i < $(this)[0].files.length; i++) {
files.push($(this)[0].files[i].name);
}
$(this).next('.custom-file-label').html(files.join(', '));
});
</script>
참고:$(this).next('.custom-file-label').html($(this)[0].files.join(', '));작동하지 않습니다.그래서 그것이 그 이유입니다.for루프가 필요합니다.
파일 업로드에서 여러 파일로 작업하지 않는 경우 이 간단한 스니펫을 사용할 수 있습니다.
<script type="text/javascript">
$('.custom-file input').change(function (e) {
if (e.target.files.length) {
$(this).next('.custom-file-label').html(e.target.files[0].name);
}
});
</script>
$(document).on('change', '.custom-file-input', function (event) {
$(this).next('.custom-file-label').html(event.target.files[0].name);
})
세상에서 가장 좋은 것.동적으로 생성된 입력에서 작동하며 실제 파일 이름을 사용합니다.
이것은 부트스트랩 4.1.3과 함께 작동합니다.
<script>
$("input[type=file]").change(function () {
var fieldVal = $(this).val();
// Change the node's value by removing the fake path (Chrome)
fieldVal = fieldVal.replace("C:\\fakepath\\", "");
if (fieldVal != undefined || fieldVal != "") {
$(this).next(".custom-file-label").attr('data-content', fieldVal);
$(this).next(".custom-file-label").text(fieldVal);
}
});
</script>
Johann-S 솔루션은 잘 작동합니다. (그리고 그가 멋진 플러그인을 만든 것처럼 보입니다.)
Bootstrap 4.3 설명서 예제 페이지에서는 다음 플러그인을 사용하여 파일 이름을 수정합니다. https://github.com/Johann-S/bs-custom-file-input
부트스트랩 사용자 지정 파일 입력 클래스를 사용합니다.프로젝트에 플러그인을 추가하고 페이지의 스크립트 파일에 이 코드를 추가합니다.
$(document).ready(function () {
bsCustomFileInput.init()
})
권장 부트스트랩 플러그인을 사용하여 사용자 지정 파일 입력을 동적으로 수행하려면 https://www.npmjs.com/package/bs-custom-file-input 을 사용합니다.
이 플러그인은 jQuery와 함께 또는 없이 사용할 수 있으며 React an Angular와 함께 작동합니다.
파일이 여러 개인 경우 첫 번째 파일과 숨겨진 파일 이름의 수만 표시하는 것이 좋습니다.
$('.custom-file input').change(function() {
var $el = $(this),
files = $el[0].files,
label = files[0].name;
if (files.length > 1) {
label = label + " and " + String(files.length - 1) + " more files"
}
$el.next('.custom-file-label').html(label);
});
이 코드는 저에게 적합합니다.
<script type="application/javascript">
$('#elementID').change(function(event){
var fileName = event.target.files[0].name;
if (event.target.nextElementSibling!=null){
event.target.nextElementSibling.innerText=fileName;
}
});
</script>
언급URL : https://stackoverflow.com/questions/48613992/bootstrap-4-file-input-doesnt-show-the-file-name
'source' 카테고리의 다른 글
| url()의 값을 인용할 필요가 있습니까? (0) | 2023.09.02 |
|---|---|
| 각각 목적어로? (0) | 2023.09.02 |
| MariaDB 10.0 시리즈는 PHP 5.6.10과 호환됩니까? (0) | 2023.09.02 |
| MariaDB TX(엔터프라이즈) 대 무료 차이점? (0) | 2023.09.02 |
| 고급 MySQL 왼쪽 조인 IFNULL 쿼리 (0) | 2023.09.02 |