집 > 기사 > 웹 프론트엔드 > 이미지를 업로드하기 전에 로컬에서 미리 볼 수 있도록 jquery를 구현하세요.

이미지를 업로드하기 전에 로컬에서 미리 볼 수 있도록 jquery를 구현하세요.

php中世界最好的语言원래의: 2018-04-26 11:27:221865검색

이번에는 jquery가 이미지를 업로드하기 전에 로컬 미리보기를 구현하기 위한 주의 사항을 가져오고, 이미지를 업로드하기 전에 jquery를 구현하여 로컬에서 미리 볼 수 있도록 하겠습니다. 다음은 실제 사례입니다.

소개 전에 작은 문제가 생겼는데 사진 미리보기가 안 나오는 이유가 사진의 경로로 밝혀졌네요! ! ! 제가 계속 쓰고 있는 것은 이미지의 로컬 경로인데, 아무 소용이 없습니다. 코드로 직접 이동하세요.

html 부분:

<img id="pic" src="" >
<input id="upload" name="file" accept="image/*" type="file" style="
display
: none"/>

input:file 이벤트는 업로드 유형입니다.
더 일반적으로 사용되는 attributes값은 다음과 같습니다.
accept:선택할 수 있는 파일 MIME 유형을 나타냅니다. 여러 MIME 유형은 영어 쉼표로 구분되며 일반적으로 사용되는 MIME 유형은 아래 표에 나와 있습니다.
모든 이미지 형식을 지원하려면 *를 쓰세요.
다중: 파일이 여러 개 있을 경우 값은 첫 번째 파일의 가상 경로입니다.

입력 스타일: 파일은 변경되지 않으므로 변경하려는 경우. 스타일을 먼저 숨기세요. display:none;

CSS 부분: 원형 아바타를 만들기 때문에 이미지 스타일을 먼저 정의합니다.

 #pic{
 width:100px;
 height:100px;
 border-radius:50% ;
 margin:20px auto;
 cursor: pointer;
 }

j쿼리 부분:

 $(function() {
 $("#pic").click(function () {
 $("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
 $("#upload").on("change",function(){
 var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径
 if (objUrl) {
 $("#pic").attr("src", objUrl) ; //将图片路径存入src中，显示出图片
 }
 });
 });
 });
 //建立一個可存取到該file的url
 function getObjectURL(file) {
 var url = null ;
 if (window.createObjectURL!=undefined) { // basic
 url = window.createObjectURL(file) ;
 } else if (window.URL!=undefined) { // mozilla(firefox)
 url = window.URL.createObjectURL(file) ;
 } else if (window.webkitURL!=undefined) { // webkit or chrome
 url = window.webkitURL.createObjectURL(file) ;
 }
 return url ;
 }

실행 결과는 다음과 같습니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 관련 기사를 참조하세요. PHP 중국어 웹사이트!