jQuery: 선택한 파일 이름을 가져옵니다.
이 코드는 IE에서 작동해야 하지만(Firefox에서는 테스트조차 하지 않음), 작동하지 않습니다.제가 원하는 것은 첨부 파일의 이름을 표시해 주는 것입니다.도와줄 사람?
<html>
<head>
<title>example</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready( function(){
$("#attach").after("<input id='fakeAttach' type='button' value='attach a file' />");
$("#fakeAttach").click(function() {
$("#attach").click();
$("#maxSize").after("<div id='temporary'><span id='attachedFile'></span><input id='remove' type='button' value='remove' /></div>");
$('#attach').change(function(){
$("#fakeAttach").attr("disabled","disabled");
$("#attachedFile").html($(this).val());
});
$("#remove").click(function(e){
e.preventDefault();
$("#attach").replaceWith($("#attach").clone());
$("#fakeAttach").attr("disabled","");
$("#temporary").remove();
});
})
});
</script>
</head>
<body>
<input id="attach" type="file" /><span id="maxSize">(less than 1MB)</span>
</body>
</html>
글을 쓰는 것과 마찬가지로 간단합니다.
$('input[type=file]').val()
어쨌든 나는 당신의 입력을 선택하기 위해 이름이나 ID 속성을 사용하는 것을 제안합니다.그리고 이벤트의 경우 다음과 같이 보여야 합니다.
$('input[type=file]').change(function(e){
$in=$(this);
$in.next().html($in.val());
});
가장 간단한 방법은 다음 줄을 간단히 사용하는 것입니다.jquery, 이것을 사용하면 당신은 이해할 수 없습니다./fakepath말도 안 되는 소리, 업로드된 파일을 바로 받아보세요.
$('input[type=file]')[0].files[0]; // This gets the file
$('#idOfFileUpload')[0].files[0]; // This gets the file with the specified id
그 밖에 유용한 명령어는 다음과 같습니다.
파일 이름을 가져오는 방법:
$('input[type=file]')[0].files[0].name; // This gets the file name
파일 형식을 가져오려면 다음을(를)
PNG를 업로드하면 다시 돌아올 것입니다.image/png
$("#imgUpload")[0].files[0].type
파일 크기(바이트)를 가져오려면:
$("#imgUpload")[0].files[0].size
또한 이러한 명령을 사용할 필요가 없습니다.on('change', 언제든지 값을 얻을 수 있습니다. 예를 들어 파일 업로드가 있을 수 있고 사용자가 클릭할 때upload, 제가 나열한 명령을 사용하기만 하면 됩니다.
$('input[type=file]').change(function(e){
$(this).parents('.parent-selector').find('.element-to-paste-filename').text(e.target.files[0].name);
});
이 코드는 표시되지 않습니다.C:\fakepath\사용할 경우 Google Chrome의 파일 이름 앞에 표시됩니다..val().
<input onchange="readURL(this);" type="file" name="userfile" />
<img src="" id="blah"/>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result)
.width(150).height(200);
};
reader.readAsDataURL(input.files[0]);
//console.log(reader);
//alert(reader.readAsDataURL(input.files[0]));
}
}
</script>
저는 올바르게 작동하는 following을 사용했습니다.
$('#fileAttached').attr('value', $('#attachment').val())
//get file input
var $el = $('input[type=file]');
//set the next siblings (the span) text to the input value
$el.next().text( $el.val() );
숨김 재설정 버튼 추가:
<input id="Reset1" type="reset" value="reset" class="hidden" />
Reset(리셋) 버튼을 클릭하여 입력을 지웁니다.
$("#Reset1").click();
<input onchange="readURL(this);" type="file" name="userfile" />
<img src="" id="viewImage"/>
<script>
function readURL(fileName) {
if (fileName.files && fileName.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#viewImage')
.attr('src', e.target.result)
.width(150).height(200);
};
reader.readAsDataURL(fileName.files[0]);
}
}
</script>
언급URL : https://stackoverflow.com/questions/1299052/jquery-get-the-file-name-selected-from-input-type-file
'programing' 카테고리의 다른 글
| ajax 응답으로 반환되는 스크립트 태그 내에서 javascript를 실행하는 방법 (0) | 2023.10.12 |
|---|---|
| Wordpress Gutenberg ACF 블록 블록이 열렸을 때 JS를 추가하는 방법 (0) | 2023.10.12 |
| 스피치 라이브러리에 오픈 소스 텍스트 (0) | 2023.10.12 |
| maxscale을 통해 mariadb에 데이터베이스를 만들 수 있는 재생책 (0) | 2023.10.07 |
| 이름이 있는 DispatcherServlet에서 URI가 있는 HTTP 요청에 대한 매핑을 찾을 수 없습니다. (0) | 2023.10.07 |