Firefox 기반 Ajax 이미지 업로드

이 기사에서는 주로 Firefox 기반의 Ajax 이미지 업로드 구현을 소개합니다. FF에서 Ajax를 사용하는 것은 매우 어렵다는 것을 오늘은 친구들이 참고할 수 있는 완벽한 솔루션을 소개하겠습니다.

이미지 파일을 업로드하는 프로토콜은 다양합니다. 이번에는 주로 "Content-Type: multipart/form-data" 형식에 대해 설명합니다.

업무상 프론트엔드의 일부 정적 파일은 FTL 템플릿 시스템을 통해 참조되고, 프런트엔드 페이지는 SSI를 통해 참조됩니다. 프로젝트 개발 중에는 대량의 정적 SHTML 파일을 생성해야 한다고 원래 생각했습니다. 백엔드 일인데 입사하고부터 이 빠른 일이 프런트엔드로 넘어가네요~~ 말문이 막히고 습관을 따를 수밖에 없었는데 게으른 사람이라 생각만 했네요 ajax를 통해 제출할 수 있는지

오늘 평소 MDN을 읽은 결과에 따르면 주로 FormData 개체는 여러 파일을 업로드하기 위한 프로토콜을 해결합니다.

https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData

모든 것이 완벽해 보이지만 File 메서드에서는 Chrome 수준에서만 작동합니다. 이미지를 업로드할 수 있는 방법은 없습니다.일반적으로 Blob 개체를 통해 구현할 수 있습니다.탐색 프로세스 1. 오랜 시간 동안 URL을 파일 개체로 변환하는 방법에 실패했습니다. . .

2.HTML5 파일 방향

a. HTML5 파일 예제로 시작하세요

https://developer.mozilla.org/en-US/docs/DOM/FileReader

예제에서는 oFREvent.target을 인쇄하세요. 결과는 방금 "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ..."를 찾았습니다

Base64로 인코딩된 데이터로 밝혀졌습니다

위의 인코딩된 데이터를 보고 Blob 개체가 지원하는지 여부에 대해 생각했습니다. 코드는 다음과 같습니다

var fd = new FormData();
fd.append('my-file', new Blob(["data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ..."],{type:"image/jpeg"}));
fd.append('my-file', new Blob(["data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ..."],{type:"image/jpeg;base64"}));

b.. base64가 인코딩된줄 알았는데 이 방법으로 디코딩이 가능할까요?

인터넷에서 base64 인코딩과 디코딩의 예를 찾아서 시도해봤습니다

fd.append('my-file', new Blob([new Base64().decode('/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ...')],{type:"image/jpeg"}));

캡쳐 패킷을 확인해보니 파일과 ajax 데이터가 정상적으로 전송된 것을 확인했습니다. 같지 않으면 실패한 것입니다

3. 브라우저 페이지 수준의 보안을 위해 파일 선택 작업을 수행해야 하는 것 같습니다. 수동으로 완료

https://developer.mozilla.org/en-US/docs/DOM /XMLHttpRequest/FormData/Using_FormData_Objects

fd.append('my-file',document.querySelector(Selector).files[0])

사실 처음에는 File API에 오해를 받았어요. the page level

갑자기 이 방법이 마지막 주소 상단에 사용된 것을 발견했습니다. . 아직은 심각하게 보지 않고 우회를 한 것 같아요.

Postscript에는 Oil Monkey 플러그인과 같은 기능을 추가하고 크롬 수준의 파일 방식을 지원함으로써 쉽게 사진을 업로드할 수 있습니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련글 :

Ajax 로딩 외부 페이지 팝업 레이어 효과 구현 방법

AJAX 제출 폼 데이터 인스턴스 분석

ajax 크로스 도메인(동일한 기본 도메인 이름) 폼 제출 방법

위 내용은 Firefox 기반 Ajax 이미지 업로드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!