이번에는 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 중국어 웹사이트!
추천 자료:
Uploadify는 이미지 업로드를 위한 진행률 표시줄 표시를 구현합니다.
jQuery EasyUI 플러그인으로 메뉴 링크 버튼을 만드는 방법
위 내용은 이미지를 업로드하기 전에 로컬에서 미리 볼 수 있도록 jquery를 구현하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!