좋은 작품을 완성하려면 완벽하게 만들어야 합니다. 예를 들어 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="' + evt.target.result + '" width="95px" height="50px" />'); } reader.readAsDataURL(file.files[0]); }else{ $("#preview").html('<p style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></p>'); } }
마스터하셨나요? 이것은 좋은 jQuery 기술이므로 모두가 빨리 시도해 보아야 합니다.
관련 권장사항:
php+ajax 이미지 파일 업로드 기능 구현 example_PHP
비동기 이미지 업로드 방법의 javascript 구현 예시
위 내용은 jQuery는 업로드하기 전에 이미지 파일의 미리보기 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!