xmlhttprequest 파일 다운로드

이름에 “XML”이라는 단어가 있음에도 불구하고 XML 형식뿐만 아니라 모든 데이터에서 작동 할 수 있습니다. 우리는 업로드 / 다운로드 파일, 진행 상황을 추적 할 수 있습니다 훨씬 더. 이 예제에서는 Blob() 생성자 및 Blob을 서버에 업로드하여 처음부터 새 텍스트 파일을 만듭니다. 또한 이 자습서에서는 AJAX요청을 통해 파일을 다운로드하고 다운로드 비율을 표시하는 방법을 보여 주며 업로드 진행 상황을 사용자에게 알리기 위해 처리기를 설정합니다. XMLHttpRequest 개체는 일반 AJAX 요청을 만드는 데 사용됩니다. 그러나 이진 파일을 다운로드할 때 요청 개체의 responseType 속성이 Blob으로 설정됩니다. 위의 코드는 파일을 다운로드하고 개체 URL을 설정합니다 – 기본적으로 사용자는 파일을 다운로드하기 위해 두 번 클릭해야합니다. 링크를 동적으로 만들고 사용자가 파일을 다운로드하려면 한 번 클릭해야 하므로 링크를 클릭할 수도 있습니다. XMLHttpRequest 개체에서 진행률 이벤트를 설정할 수 있습니다. 이를 통해 다운로드 한 파일의 백분율을 얻을 수 있습니다. 요소의 다운로드 속성은 IE 10 및 11에서 작동하지 않습니다. 대안은 Blob 및 msSaveBlob 및 msToBlob 메서드를 사용하여 로컬로 파일 저장을 참조하십시오.

JPEG 이미지에 대한 httpbin.org 요청을 만들고 이전과 동일한 논리를 사용하여 이미지 데이터를 Blob에 로드하여 사용자 파일 시스템에 다운로드합니다. 그러나 경우에 따라 웹 응용 프로그램은 브라우저에 맡기지 않고 다운로드 부분 자체를 처리하려고 할 수 있습니다. 어플리케이션의 UI 자체에 파일의 다운로드 진행률을 표시하는 것과 같은 자체 이유가 있을 수 있습니다. 또 다른 이유는 수익 창출 일 수 있습니다 – 응용 프로그램은 파일을 다운로드하는 동안 사용자에게 광고를 표시 할 수 있습니다. XHR에서 파일을 이진 Blob로 가져오는 것은 고통스러웠습니다. 기술적으로, 그것은 심지어 가능 하지 않았다. 잘 문서화 된 한 가지 트릭은 아래와 같이 사용자 정의 charset으로 mime 형식을 재정의하는 것입니다. 현재 대부분의 웹 응용 프로그램에는 사용자가 파일을 다운로드할 수 있는 일반 링크 <a href="http://download-link"가 표시됩니다. 링크를 클릭하면 브라우저는 파일임을 감지하고 사용자가 다운로드할 수 있도록 합니다.

이것은 사용자가 파일을 다운로드 할 수 있도록하는 가장 쉬운 방법입니다. 약속 기반 API를 사용하여 XMLHttpRequest를 사용하여 파일을 업로드/다운로드합니다. 트리거 앵커를 클릭하면 저장하려는 파일 이름과 기본적으로 데이터를 base64 인코딩된 문자열로 나타내는 readAsDataURL()에 의해 생성된 URL로 다운로드 속성을 수신하는 throw-away 앵커 요소를 만듭니다. 그런 다음 새 앵커 요소에서 클릭 이벤트를 시뮬레이션하여 다운로드를 트리거합니다. mgcrea/js-xhr 파일에서 새로운 릴리스에 대한 알림을 원하십니까? 이전 예제에서는 서버의 마임 유형을 재정의하고 응답 텍스트를 이진 문자열로 처리하여 이미지를 이진 “파일”로 다운로드했습니다. 대신 XMLHttpRequest의 새 응답유형 및 응답 속성을 활용하여 데이터를 반환할 형식을 브라우저에 알릴 수 있습니다. 다음은 전체 예제입니다. 아래 코드는 서버에서 /article/xmlhttprequest/example/load에서 URL을 로드하고 진행률을 인쇄합니다. 이미지 파일을 나타내는 이진 문자열입니다. 서버가 처리되지 않은 데이터를 다시 전달하여 데이터를 전달합니다.

category

  • カテゴリーなし

latest post

PAGE TOP