jquery는 이미지 upload_jquery 전에 로컬 미리보기 기능을 구현합니다.

이 기사의 예에서는 참조용으로 업로드하기 전에 이미지를 미리 볼 수 있는 특정 jquery 코드를 공유합니다.
소개 전에 작은 문제가 생겼는데 사진 미리보기를 못찾아서 사진이 안나오는 이유가 사진의 경로로 밝혀졌네요! ! ! 제가 계속 쓰고 있는 것은 이미지의 로컬 경로인데, 아무 소용이 없습니다. 코드로 직접 이동하세요.

html 부분:

코드 복사 코드는 다음과 같습니다.

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

input:file의 스타일은 변경되지 않으므로 스타일을 변경하려면 먼저 숨겨야 합니다. 디스플레이:없음;

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

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

jQuery 부분:

 $(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 ;
 }

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

위 내용은 이 글의 전체 내용입니다. 모든 분들이 jquery 프로그램을 배우는데 도움이 되었으면 좋겠습니다.