javascript input 그림 업로드 및 미리 보기,FileReader 미리 보기 그림
3976 단어 js사진 업로드사진 업로드 미리 보기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.file-ipt{position: absolute;left:0;top: 0;opacity: 0;width: 50px;height: 25px;} // input ，
.btn{width: 50px;height: 25px; background-color: skyblue;color: white;margin-right: 80px;border: none;border-radius: 10px;font-size: 8px;}
</style>
</head>
<body>
<button class="btn"> </button>
<input type="file" id="file" accept="image/jpg,imgae/jpeg,image/png" class="file-ipt" onchange="insertimg(this);"><br>
<img src="" id="img1" alt="">
<script language="javascript">
function insertimg(img){
var rd=new FileReader();
files=img.files[0];
var filetype=files.type.slice(6,10);
if(filetype!='jpg'&&filetype!='jpeg'&&filetype!='png'){
alert(' png,jpeg,jpg ');
return;
}else{
rd.readAsDataURL(files);
rd.onloadend=function(e){
document.getElementById('img1').src=e.target.result;
document.getElementById('img1').style.width="300px";
document.getElementById('img1').style.height="auto";
};
}
}
</script>
</body>
</html>우선 file 과 FileReader 를 먼저 알 수 있 습 니 다. 의 API 는 하나 이상 의 파일 을 선택 한 후에 선택 한 파일 을 대표 하 는 하나 이상 의 File 대상 에 접근 합 니 다.이 대상 들 은 하나의 FileList 대상 에 포함 되 어 있 습 니 다.모든 type 속성(attribute)은 file 의요소 에 files 속성 이 있어 사용자 가 선택 한 파일 을 저장 합 니 다.files 는 length 속성 과 item 방법 이 있 습 니 다.files[index]나 files.item(index)을 통 해 우리 가 선택 한 file 대상 을 얻 을 수 있 습 니 다.change 이벤트 감청 input file 입력 을 통 해 이 벤트 를 완성 할 수 있 습 니 다.
html 코드:
<ul class="crgoods_uploadUl clearfix">
<li><img src="img/product1.jpg"></li>
<li><img src="img/product1.jpg"></li>
<li class="add"><i>+</i> 20 <input type="file" class="liAdd_flie" οnchange="liUploadImg(this)"></li>
</ul>
//
function liUploadImg(file){
if (file.files && file.files[0]){
var reader = new FileReader();
reader.onload = function(evt){
// imgUpload.src = evt.target.result;
$('.crgoods_uploadUl li.add').before('<li><img src="'+evt.target.result+'"></li>');
}
reader.readAsDataURL(file.files[0]);
}else{
var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
file.select();
var src = document.selection.createRange().text;
imgUpload.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
}
}예 는 다음 과 같다.
자 바스 크 립 트 input 이미지 업로드 및 미리 보기,FileReader 미리 보기 이미지 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.자 바스 크 립 트 파일 업로드 및 미리 보기 내용 에 대해 서 는 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
