html5를 사용하여 삭제 된 파일을 열는 방법

마지막 게시물에서 html5 파일 드래그 앤 드롭을 사용하는 방법 , 우리는 HTML5 파일 API를 사용하고 드래그 앤 드롭 이벤트를 구현하며 파일 정보를 검색하는 방법을 발견했습니다. 오늘은 JavaScript를 사용하여 클라이언트에 파일을로드하려고합니다. 왜 JavaScript에서 로컬 파일을 열어야합니까? HTML 양식에서 파일을 업로드하는 것은 어리석은 일입니다. 사람들은 종종 카메라에서 웹 서버로 멀티 메가 바이트 사진을 전송할 때 사용합니다. 그들이 파일을 찾는다고 가정하면 업로드는 잘못된 사진, 지원되지 않은 형식 또는 허용되는 것보다 더 큰 파일 크기라는 것을 알기 위해 몇 분만 걸릴 수 있습니다. 지금까지 개발자는 더 나은 사용자 경험을 제공하기 위해 플래시 또는 기타 플러그인에 의존해야했습니다. JavaScript의 사전 처리는 여러 가지 이점을 제공합니다.

로컬 파일 처리는 빠릅니다 파일을 분석하여 특정 크기보다 올바른 형식이고 낮은 형식을 보장 할 수 있습니다.

업로드 전에 이미지와 같은 파일을 미리 볼 수 있습니다 캔버스 요소에서 이미지를 자르거나 크기를 조정 한 다음 결과 파일을 업로드 할 수 있습니다.

filereader 객체 Filereader는 W3C 파일 API의 일부를 형성하고 파일 객체에서 참조 된 파일에서 데이터를 비동기로로드하기위한 4 가지 방법을 제공합니다.
• .readastext (file f, [encoding]) : 파일 f를 문자열로 읽습니다. UTF-8 인코딩이 가정되지만 옵션 인코딩 매개 변수는 다른 형식을 지정할 수 있습니다.
  .ReadAsDataurl (파일 F) : 파일 F를 인코딩 된 데이터 URL로 읽습니다. .ReadAsbinaryString (파일 F) : 파일 F를 이진 문자열 로 읽습니다 .ReadAsArrayBuffer (파일 F) : 파일 F를 ArrayBuffer 객체로 읽습니다

다음 코드에서는 처음 두 가지 방법을 사용하여 텍스트 및 이미지 파일을로드하고 표시합니다. javaScript에서 파일을 비동기로 열 수 있습니다 다음은 #FiLedRag 요소에 선택되거나 삭제 될 때 파일 객체가 전달되는 원래 ParseFile () 함수입니다.

상태 업데이트에 따라 텍스트 파일 (텍스트/일반, 텍스트/html, 텍스트/CSS 등)이 있는지 확인하고 filereader.readastext () 메소드를 사용하여로드하고 결과를 표시합니다 ( 문자를 이스케이프 한 후).

마찬가지로 이미지 파일 (이미지/jpeg, image/gif, image/png 등)이 있는지 확인하고 filereader.readasdataurl () 메소드를 사용하여 데이터 URL에로드하고 결과를 IMG 태그의 SRC 속성으로 전달합니다.

// output file information
function ParseFile(file) {

	Output(
		"<p>File information: <strong>" + file.name +
		"</strong> type: <strong>" + file.type +
		"</strong> size: <strong>" + file.size +
		"</strong> bytes</p>"
	);
	
}

Firefox, Chrome 또는 Opera의 데모 페이지를 참조하십시오 (드래그 앤 드롭 지원 없음). 파일을 다운로드 할 수도 있습니다 코드를 검사합니다. 이것이 유용하지만 궁극적으로 파일을 웹 서버에 업로드해야합니다. HTML5 및 Ajax 를 사용하여 파일을 비동기로 업로드하는 방법을 계속 지켜봐 주시기 바랍니다. html5 및 javaScript 오픈 파일에 대한 자주 묻는 질문 (FAQ) html5 및 javaScript를 삭제 한 파일을 열기 위해 사용하는 목적은 무엇입니까?

	// display text
	if (file.type.indexOf("text") == 0) {
		var reader = new FileReader();
		reader.onload = function(e) {
			Output(
				"<p><strong>" + file.name + ":</strong></p><pre class="brush:php;toolbar:false">" + 
				e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;") +
				"

" ); } reader.readAsText(file); }

html5 및 javaScript는 웹 사이트에서 사용자 경험을 향상시키기 위해 삭제 된 파일을 열는 데 사용됩니다. 이 기능을 사용하면 사용자가 로컬 시스템에서 파일을 웹 페이지로 끌어 낼 수 있습니다. 삭제되면 파일을 JavaScript를 사용하여 읽고 처리 할 수 ​​있습니다. 이는 파일 업로드, 파일 콘텐츠 읽기 또는 웹 응용 프로그램 내에서 이미지 또는 문서 처리와 같은 작업에 특히 유용 할 수 있습니다.

	// display an image
	if (file.type.indexOf("image") == 0) {
		var reader = new FileReader();
		reader.onload = function(e) {
			Output(
				"<p><strong>" + file.name + ":</strong><br />" +
				'<img src="' + e.target.result + '" /></p>'
			);
		}
		reader.readAsDataURL(file);
	}

HTML5에서 드래그 앤 드롭 기능이 어떻게 작동하는지 html5의 드래그 앤 드롭 기능은 일련의 이벤트 및 특성에 의해 촉진됩니다. 사용자가 시스템에서 파일을 선택하고 웹 페이지로 드래그하면 'Dragover'이벤트가 트리거됩니다. 파일이 삭제되면 '드롭'이벤트가 트리거됩니다. 이러한 이벤트의 일부인 Datatransfer 속성은 파일 데이터를 보유하고 파일에 액세스하고 처리하는 데 사용될 수 있습니다. JavaScript를 사용하여 삭제 된 파일의 내용을 어떻게 읽을 수 있습니까? JavaScript는 파일의 내용을 읽기 위해 FilEREADER API를 제공합니다. 파일이 웹 페이지에 삭제되면 Datatransfer 속성을 통해 액세스 할 수 있습니다. 새 FilereAder 객체를 만들 수 있으며 readastext 또는 readasdataurl 메소드를 사용하여 파일 내용을 읽을 수 있습니다. 결과는 FilereAder 객체의 '로드'이벤트에서 액세스 할 수 있습니다.

한 번에 여러 개의 삭제 된 파일을 열 수 있습니까?

예, 한 번에 여러 개의 삭제 된 파일을 열 수 있습니다. Datatransfer 속성은 FilleList 객체 인 '파일'속성을 제공합니다. 이 개체는 삭제 된 모든 파일의 목록을 나타냅니다. 이 목록을 통해 각 파일에 개별적으로 액세스하고 처리 할 수 ​​있습니다.

html5 및 javascript를 사용하여 어떤 유형의 파일을 열 수 있습니까?

html5 및 javaScript를 사용하여 모든 유형의 파일을 열 수 있습니다. 그러나 파일을 처리하는 방법은 해당 유형에 따라 다릅니다. 예를 들어, 텍스트 파일은 텍스트로 읽을 수 있지만 IMG 요소를 사용하여 이미지 파일을 읽고 IMG 요소를 사용하여 표시 할 수 있습니다.

html5 및 javaScript를 사용하여 드롭 된 파일을 열 수있는 것이 안전합니까?

html5를 사용하여 드롭 파일을 열고 JavaScript가 클라이언트 측면에서만 사용되므로 일반적으로 안전합니다. 그러나 파일 데이터가 서버로 전송되면 보안 문제를 방지하기 위해 올바르게 검증되고 소독되어야합니다.

HTML5 및 JavaScript를 사용하여 모든 브라우저에서 삭제 된 파일을 열 수 있습니까?

대부분의 최신 브라우저는 HTML5 드래그 및 드롭 기능 및 JavaScript FileDer API를 지원합니다. 그러나 이러한 기능이 구현되는 방식에는 차이가있을 수 있습니다. 따라서 호환성을 보장하기 위해 다른 브라우저에서 코드를 테스트하는 것이 중요합니다.

웹 페이지에 삭제 된 파일의 컨텐츠를 어떻게 표시 할 수 있습니까?

삭제 된 파일의 내용은 JavaScript를 사용하여 웹 페이지에 표시 될 수 있습니다. 예를 들어, 파일이 이미지 인 경우 데이터 URL로 읽고 IMG 요소의 SRC 속성으로 설정할 수 있습니다. 파일이 텍스트 파일 인 경우 해당 내용을 텍스트 요소에 삽입 할 수 있습니다.

삭제할 수있는 파일 유형을 제한 할 수 있습니까?

삭제할 수있는 파일 유형을 직접 제한 할 수 없지만 파일 객체의 '유형'속성을 사용하여 삭제 된 파일의 유형을 확인할 수 있습니다. 파일 유형이 허용 된 유형과 일치하지 않으면 오류 메시지를 표시하고 파일을 무시할 수 있습니다.

다른 폴더에서 파일을 끌어 낼 수 있습니까?

예, 다른 폴더에서 파일을 드래그 앤 드롭 할 수 있습니다. 드래그 앤 드롭 기능은 파일의 위치에 따라 다릅니다. 사용자가 파일에 액세스 할 수있는 한 웹 페이지로 드래그하여 삭제할 수 있습니다.

위 내용은 html5를 사용하여 삭제 된 파일을 열는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!