대부분의 최신 브라우저는 HTML5 드래그 및 드롭 기능 및 JavaScript FileDer API를 지원합니다. 그러나 이러한 기능이 구현되는 방식에는 차이가있을 수 있습니다. 따라서 호환성을 보장하기 위해 다른 브라우저에서 코드를 테스트하는 것이 중요합니다. 삭제 된 파일의 내용은 JavaScript를 사용하여 웹 페이지에 표시 될 수 있습니다. 예를 들어, 파일이 이미지 인 경우 데이터 URL로 읽고 IMG 요소의 SRC 속성으로 설정할 수 있습니다. 파일이 텍스트 파일 인 경우 해당 내용을 텍스트 요소에 삽입 할 수 있습니다. 예, 다른 폴더에서 파일을 드래그 앤 드롭 할 수 있습니다. 드래그 앤 드롭 기능은 파일의 위치에 따라 다릅니다. 사용자가 파일에 액세스 할 수있는 한 웹 페이지로 드래그하여 삭제할 수 있습니다. 마지막 게시물에서 html5 파일 드래그 앤 드롭을 사용하는 방법
, 우리는 HTML5 파일 API를 사용하고 드래그 앤 드롭 이벤트를 구현하며 파일 정보를 검색하는 방법을 발견했습니다. 오늘은 JavaScript를 사용하여 클라이언트에 파일을로드하려고합니다.
업로드 전에 이미지와 같은 파일을 미리 볼 수 있습니다
다음 코드에서는 처음 두 가지 방법을 사용하여 텍스트 및 이미지 파일을로드하고 표시합니다.
상태 업데이트에 따라 텍스트 파일 (텍스트/일반, 텍스트/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>"
);
}
// 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, "<").replace(/>/g, ">") +
""
);
}
reader.readAsText(file);
}
// 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);
}
한 번에 여러 개의 삭제 된 파일을 열 수 있습니까?
예, 한 번에 여러 개의 삭제 된 파일을 열 수 있습니다. Datatransfer 속성은 FilleList 객체 인 '파일'속성을 제공합니다. 이 개체는 삭제 된 모든 파일의 목록을 나타냅니다. 이 목록을 통해 각 파일에 개별적으로 액세스하고 처리 할 수 있습니다.
html5 및 javaScript를 사용하여 모든 유형의 파일을 열 수 있습니다. 그러나 파일을 처리하는 방법은 해당 유형에 따라 다릅니다. 예를 들어, 텍스트 파일은 텍스트로 읽을 수 있지만 IMG 요소를 사용하여 이미지 파일을 읽고 IMG 요소를 사용하여 표시 할 수 있습니다.
html5 및 javaScript를 사용하여 드롭 된 파일을 열 수있는 것이 안전합니까? HTML5 및 JavaScript를 사용하여 모든 브라우저에서 삭제 된 파일을 열 수 있습니까?
웹 페이지에 삭제 된 파일의 컨텐츠를 어떻게 표시 할 수 있습니까?
삭제할 수있는 파일 유형을 직접 제한 할 수 없지만 파일 객체의 '유형'속성을 사용하여 삭제 된 파일의 유형을 확인할 수 있습니다. 파일 유형이 허용 된 유형과 일치하지 않으면 오류 메시지를 표시하고 파일을 무시할 수 있습니다.
다른 폴더에서 파일을 끌어 낼 수 있습니까?
위 내용은 html5를 사용하여 삭제 된 파일을 열는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
