jQuery는 업로드하기 전에 이미지 파일의 미리보기 기능을 구현합니다.

좋은 작품을 완성하려면 완벽하게 만들어야 합니다. 예를 들어 jQuery를 사용하여 이미지 업로드 기능을 구현하면 업로드하기 전에 미리 볼 수 있나요? 이 기사에서는 업로드 전 jQuery 이미지 파일 미리보기 기능의 간단한 예를 주로 공유합니다. 편집자분께서 꽤 괜찮다고 하셔서 지금 공유해드리고 참고용으로 올려드리도록 하겠습니다. 배워보신 후 업로드하기 전에 jQuery를 이용해 이미지 파일의 미리보기 기능을 구현해 보시기를 바라겠습니다.

1. 먼저 p

onchange 트리거 이벤트를 준비하세요

<input type="file" onchange="preview(this)" ></span>
<p id="preview"></p>

2. JS 코드 작성

//上传图片之前预览图片
function preview(file){
if (file.files && file.files[0]){ 
var reader = new FileReader(); 
reader.onload = function(evt){ 
$("#preview").html('<img src="&#39; + evt.target.result + &#39;" width="95px" height="50px" />'); 
} 
reader.readAsDataURL(file.files[0]); 
}else{
$("#preview").html('<p style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\&#39;&#39; + file.value + &#39;\&#39;"></p>'); 
} 
}

마스터하셨나요? 이것은 좋은 jQuery 기술이므로 모두가 빨리 시도해 보아야 합니다.

관련 권장사항:

PHP 이미지 파일 업로드 구현 코드

php+ajax 이미지 파일 업로드 기능 구현 example_PHP

비동기 이미지 업로드 방법의 javascript 구현 예시

위 내용은 jQuery는 업로드하기 전에 이미지 파일의 미리보기 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!