JavaScript 이미지 위조 비동기 업로드 프로 세 스 분석 실현

논 리 를 실현 하 다
우선 ajax 에서 파일 이 있 는 post 요청 을 보 낼 수 없 기 때문에 동기 화 방식 을 사용 해 야 합 니 다.그러나 새로 고침 할 때 저 희 는 원래 페이지 에서 새로 고침 하지 말고 숨겨 진 iframe 에서 새로 고침 합 니 다.form 폼 에서 action 은 파일 업로드 작업 을 정상적으로 작성 합 니 다.붙 어 있 는 target 은 숨겨 진 iframe 을 작성 합 니 다.이렇게 폼 을 제출 하면 파일 이 업로드 되 고 페이지 가 숨겨 진 iframe 으로 새로 고침 되 기 때문에 사용자 가 보 는 효 과 는 ajax 처리 효과 와 같 습 니 다.
dom 구조
여기 에는 두 가지 주의 할 점 이 있 습 니 다.하 나 는 iframe 이 숨겨 져 있 고 사용자 에 게 보이 지 않 습 니 다.둘째,form 의 target 속성 은 iframe 의 id 속성 입 니 다.이 곳 의 일치 성 을 확보 해 야 합 니 다.그렇지 않 으 면 서버 의 전송 주 소 를 얻 을 수 없습니다.

그림 미리 보기
일반적으로 사진 이 업로드 되 기 전에 저 희 는 사용자 가 업로드 후의 모습 을 미리 볼 수 있 기 를 바 랍 니 다.여 기 는 두 가지 처리 방식 이 있 습 니 다.하 나 는 사진 이 올 라 오 면 서버 가 그림 의 주 소 를 되 돌려 주 고 그림 을 보 여 주 는 것 입 니 다.중간 시간 차이 가 적어 서 사용자 에 게 정말 미리 보 는 것 같다 는 착각 을 줍 니 다.두 번 째 방법 은 그림 이 업로드 되 기 전에 input 의 로 컬 그림 주 소 를 가 져 와 서 표시 하 는 것 입 니 다.로 컬 그림 을 표시 하기 때문에 시간 차이 가 없어 서 진정한 미리 보 기 를 실현 합 니 다.간단 한 논리 논리 코드 는 다음 과 같다.

$("#userHeadImg").change(function(event) {          
   var file = $(event.target)[0].files[0];
   var src = URL.createObjectURL(file);
   if(file){
    //        
   }else{
    //       
   }
   //   src       ，        img   src       
});

업로드 시작
onchange 이벤트 에서 form 의 submit 사건 을 촉진 하여 사진 을 업로드 합 니 다.$("#upload").submit();서버 에서 전송 할 그림 url 가 져 오기
서버 가 주 소 를 iframe 으로 되 돌려 주면 iframe 이 새로 고 쳐 집 니 다.js 감청 iframe 의 onload 를 사용 하여 onload 가 발생 하면 서버 에서 메 시 지 를 전송 한 것 을 표시 합 니 다.var imgsrc=$(this).contents().find("pre").text();업로드 파일 형식 제한 추가accept="image/gif;image/jpg;"이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.