첨부파일 크기와 파일이름을 뽑아 오고 싶어서 몇일째 찾아보는중입니다
본문
저는 비전공자 이고,
개발자도 아닙니다.
그래서 질문 자체도 이상하게 보이실지 모릅니다.
자바스크립트로 첨부파일 크기와 파일이름을 가져오고 싶은데..
<input type="file" class="form-control" id="bf_file_<?php echo $i+1 ?>" name="bf_file[]" value="사진선택">
여기서 id가 bf_file0, bf_file_1 이런식으로 생성될꺼라 생각되어서
bf_file_0 으로 테스트를 해봤습니다.
<script>
console.log(document.querySelectorAll('#bf_file_1').length);
console.log($("#bf_file").files[1].value);
console.log($("#bf_file").files[0].value);
</script>
등등 헤아리기 힘들만큼 많이 시도해 봤지만 다 안되네요.
제가 접근해야되는 방향을 알려주세요.
개발자가 되고 싶은 생각은 없습니다.
(배워서 그쪽으로 나가기엔 너무 나이를 먹었습니다.)
쉽게 접근 할수있는 방법을 알려주세요.
감사합니다.
답변 2
<script>
inputElement<?php echo $i+1 ?> = document.getElementById('bf_file_<?php echo $i+1 ?>');
labelElement<?php echo $i+1 ?> = document.getElementById('file-name_<?php echo $i+1 ?>');
inputElement<?php echo $i+1 ?>.onchange = function(event) {
var path = inputElement<?php echo $i+1 ?>.value;
labelElement<?php echo $i+1 ?>.innerHTML = path.split(/(\\|\/)/g).pop();
}
</script>
ex)
<div class="bo_w_flie write_div">
<div class="file_wr write_div">
<label for="bf_file_<?php echo $i+1 ?>" class="lb_icon"><i id="fa_<?php echo $i+1 ?>" class="fa fa-folder-open" aria-hidden="true"></i><span class="sound_only"> 파일 #<?php echo $i+1 ?></span></label>
<?php if ($file[$i]['file']) echo "<span style=cursor:pointer onclick=copyMode('".$file[$i]['path'].'/'.$file[$i]['file']."','파일주소가')>";?>
<label style="margin-left:40px;cursor:pointer" title="<?php if($file[$i]['file']){echo $file[$i]['path']."/".$file[$i]['file'].' 클릭 복사';}?>">
<?php
$file = get_file($bo_table, $wr_id);
$image = urlencode($file[$i]['file']);
$image_path = G5_DATA_PATH.'/file/'.$bo_table;
$image_url = G5_DATA_URL.'/file/'.$bo_table;
if (preg_match("/\.(gif|jpg|jpeg|png|webp)$/i", $image)) {
$thumb = thumbnail($image, $image_path , $image_path , 38, 28, false, true);
$image_content = $image_url.'/'.$thumb;
} else {
$pattern = "#.+\.(?P<ftype>[a-z]{3})#i";
preg_match($pattern, $file[$i]['source'], $match);
if($match['ftype']){
$image_content = $board_skin_url.'/img/'.$match['ftype'].'.gif';
} else {
$image_content = $board_skin_url.'/img/noimage.png';
}
}
echo "<img class='img_preview".($i+1)."' style='width:38px;height:28px;opacity:.8' src='".$image_content."'>";
?></label><?php echo "</span>";?>
<input type="radio" class="radio<?php echo $i+1 ?>" id="radio_<?php echo $i+1 ?>" name="wr_6" value="<?php echo $i ?>" <?php if ($write['wr_6'] == $i&&$write['wr_6'] >= '0') echo "checked";if(!preg_match("/\.(gif|jpg|jpeg|png|webp)$/i", $image))echo 'disabled';?> title="select list view"> <label for="<?php echo $i ?>" title="list file_<?php echo $i+1 ?>" class="homepage"></label>
<input type="button" value="file 찿기" id="ba_file_<?php echo $i+1 ?>" onclick="document.getElementById('bf_file_<?php echo $i+1 ?>').click()" title="Attachments <?php echo $i+1 ?> : Volume <?php echo $upload_max_filesize ?> Only the following can be uploaded" class="frm_file ">
<label for="<?php echo $i ?>" id="file-name_<?php echo $i+1 ?>" class="homepage">선택된 file 없음</label>
<input type="file" name="bf_file[]" style="display:none" id="bf_file_<?php echo $i+1 ?>" title="파일첨부 <?php echo $i+1 ?> : 용량 <?php echo $upload_max_filesize ?> 이하만 업로드 가능" class="frm_file ">
<script>
inputElement<?php echo $i+1 ?> = document.getElementById('bf_file_<?php echo $i+1 ?>');
labelElement<?php echo $i+1 ?> = document.getElementById('file-name_<?php echo $i+1 ?>');
inputElement<?php echo $i+1 ?>.onchange = function(event) {
var path = inputElement<?php echo $i+1 ?>.value;
labelElement<?php echo $i+1 ?>.innerHTML = path.split(/(\\|\/)/g).pop();
}
</script>
</div>
<?php if ($is_file_content) { ?>
<input type="text" name="bf_content[]" value="<?php echo ($w == 'u') ? $file[$i]['bf_content'] : ''; ?>" title="파일 설명을 입력해주세요." class="full_input frm_input file_wr" size="50" placeholder="파일 설명을 입력해주세요.">
<?php } ?>
<?php if($w == 'u' && @$file[$i]['file']) { ?>
<span class="file_del">
<input type="checkbox" id="bf_file_del<?php echo $i ?>" name="bf_file_del[<?php echo $i;?>]" value="1"> <label class="file_wr" for="bf_file_del<?php echo $i ?>"><a href="<?php echo $file[$i]['href']?>"><?php echo $file[$i]['source'].'('.$file[$i]['size'].')';?></a> 파일 삭제</label>
</span>
<?php } ?>
</div>
답변 감사합니다.
저는 기존 소스를 유지한 상태에서 첨부파일의 속성 (이름, 용량 등)을 얻기 위한 질문이였는데
통채로 소스를 짜주셨네요.
제 실력으로 주신 소스 파악하는 데만 몇달이 걸리것같습니다.ㅠㅠㅠㅠ
<input type="file" class="form-control" id="bf_file_<?php echo $i+1 ?>" name="bf_file[]" value="사진선택" onchange="showFileInfo(this)">
<p id="fileInfo"></p>
<script>
function showFileInfo(input) {
if (input.files && input.files[0]) {
var file = input.files[0];
var fileSize = file.size; // 파일 크기 (바이트)
var fileName = file.name; // 파일 이름
// 파일 크기를 메가바이트로 변환 (1MB = 1024 * 1024 바이트)
var fileSizeMB = fileSize / (1024 * 1024);
// 파일 정보를 화면에 출력
document.getElementById('fileInfo').innerHTML = "파일 이름: " + fileName + "<br>파일 크기: " + fileSizeMB.toFixed(2) + "MB";
}
}
</script>
이 코드를 참고 하세요.
일단 하는데까지 해볼께요.
채택 감사 합니다.
<input type="file" class="form-control" id="bf_file_<?php echo $i+1 ?>" name="bf_file[]" value="사진선택">
여기보면 id="bf_file_<?php echo $i+1 ?>" 아이디값을 별도로 주셔는데 이뉴가 뭔가요 ? 파일을 여러게 연속 불러오기 위해서 인가요?
그냥 클래스 안에 다 정의 하시고 스크립트 처리 하세요
<input type="file" class="form-control bf_file" name="bf_file[]" value="사진선택">
웅프님 답변 감사합니다.
제가 짠 소스가 아니라. 이윰빌더 소스 입니다.
기존 소스는 그대로 둔상태로 자바스크립트에서 가져오는 방법으로 해결하고 싶습니다.
id="bf_file_<?php echo $i+1 ?> 그대로 두고
자바스크립트에서 가져오는건 힘들까요?
답변을 작성하시기 전에 로그인 해주세요.