웹사이트 구축에서는 파일 업로드와 다운로드가 불가피합니다. HTML5에서 제공하는 API는 풍부한 프론트엔드 애플리케이션을 갖추고 있으며, 다양한 브라우저의 호환성 문제를 완벽하게 해결하고 있으니 서둘러서 받아보세요!
HTML의 input[type="file"] 태그에는 사용자가 여러 파일을 선택할 수 있는 다중 속성이 있습니다. FileList 개체는 사용자가 선택한 파일 목록을 나타냅니다. 이 목록의 각 파일은 파일 객체입니다.
파일 개체의 속성:
name: 파일 이름, 경로 제외.
type : 파일 형식. 이미지 유형의 파일은 모두 image/로 시작하며, 이는 이미지만 업로드하도록 제한하는 데 사용할 수 있습니다.
크기 : 파일 크기. 파일 크기에 따라 추가 작업을 수행할 수 있습니다.
lastModified: 파일이 마지막으로 수정된 시간입니다.
<input type="file" id="files" multiple><script>
var elem = document.getElementById('files');
elem.onchange = function (event) {
var files = event.target.files;
for (var i = 0; i < files.length; i++) {
// 文件类型为 image 并且文件大小小于 200kb
if(files[i].type.indexOf('image/') !== -1 && files[i].size < 204800){
console.log(files[i].name);
}
}
}
</script>입력에는 파일 업로드를 통해 제출할 수 있는 파일 형식을 지정하는 데 사용할 수 있는 accept 속성이 있습니다.
accept="image/*"를 사용하면 업로드할 수 있는 이미지 형식만 제한할 수 있습니다. 다만, 웹킷 브라우저에서 응답이 느린 문제가 있었고, 파일 선택 상자가 팝업되기까지 몇 초가 걸렸다.
해결책은 * 와일드카드 문자를 지정된 MIME 유형으로 변경하는 것입니다.
<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png">
Blob 개체는 컨테이너와 동일하며 이진 데이터를 저장하는 데 사용할 수 있습니다. 여기에는 두 가지 속성이 있는데, size 속성은 바이트 길이를 나타내고, type 속성은 MIME 유형을 나타냅니다.
Blob 객체는 Blob() 생성자를 사용하여 만들 수 있습니다.
var blob = new Blob(['hello'], {type:"text/plain"});Blob 생성자의 첫 번째 매개변수는 ArrayBuffer 개체, ArrayBufferView 개체, Blob 개체 및 문자열을 저장할 수 있는 배열입니다.
Blob 객체는 Slice() 메서드를 통해 새 Blob 객체를 반환할 수 있습니다.
var newblob = blob.slice(0,5, {type:"text/plain"});slice() 메서드는 세 가지 매개 변수를 사용하며 모두 선택 사항입니다. 첫 번째 매개변수는 복사할 Blob 객체 내 바이너리 데이터의 시작 위치를 나타내고, 두 번째 매개변수는 복사본의 끝 위치를 나타내며, 세 번째 매개변수는 Blob 객체의 MIME 유형을 나타냅니다.
canvas.toBlob()은 Blob 객체를 생성할 수도 있습니다. toBlob()은 세 개의 매개변수를 사용합니다. 첫 번째는 콜백 함수, 두 번째는 이미지 유형, 기본값은 image/png, 세 번째는 이미지 품질이며 값은 0에서 1 사이입니다.
var canvas = document.getElementById('canvas');
canvas.toBlob(function(blob){ console.log(blob); }, "image/jpeg", 0.5);Blod 개체는 window.URL 개체를 통해 네트워크 주소를 생성하고 이를 a 태그의 다운로드 속성과 결합하여 파일 다운로드 기능을 구현할 수 있습니다.
예를 들어 캔버스를 이미지 파일로 다운로드합니다.
var canvas = document.getElementById('canvas');
canvas.toBlob(function(blob){ // 使用 createObjectURL 生成地址，格式为 blob:null/fd95b806-db11-4f98-b2ce-5eb16b38ba36
var url = URL.createObjectURL(blob); var a = document.createElement('a');
a.download = 'canvas';
a.href = url; // 模拟a标签点击进行下载
a.click(); // 下载后告诉浏览器不再需要保持这个文件的引用了
URL.revokeObjectURL(url);
});비슷한 방법으로 문자열을 텍스트 파일로 저장할 수도 있습니다.
FileReader 개체는 주로 파일을 메모리로 읽어들이고 파일의 데이터를 읽는 데 사용됩니다. 생성자를 통해 FileReader 개체를 생성합니다.
var reader = new FileReader();
개체에는 다음과 같은 메서드가 있습니다.
abort: 읽기 작업을 중단합니다.
readAsArrayBuffer: 파일 내용을 ArrayBuffer 개체로 읽어옵니다.
readAsBinaryString: 파일을 바이너리 데이터로 읽습니다.
readAsDataURL: 파일을 data: URL 형식의 문자열로 읽습니다.
readAsText: 파일을 텍스트로 읽습니다.
일반적인 응용 프로그램은 클라이언트가 이미지를 업로드한 후 readAsDataURL()을 통해 이미지를 표시하는 것입니다.
<input type="file" id="files" accept="image/jpeg,image/jpg,image/png"><img src="blank.gif" id="preview"><script>
var elem = document.getElementById('files'),
img = document.getElementById('preview');
elem.onchange = function () { var files = elem.files,
reader = new FileReader(); if(files && files[0]){
reader.onload = function (ev) {
img.src = ev.target.result;
}
reader.readAsDataURL(files[0]);
}
}</script>그런데 일부 휴대폰에서 세로로 사진을 찍을 때 사진을 업로드할 때 버그가 있고, 삼성이나 아이폰을 포함해 사진이 거꾸로 되어 있는 것을 발견하게 됩니다. . . 여기에서는 솔루션을 설명하지 않습니다. 관심이 있는 경우 모바일 이미지 업로드 회전 및 압축 솔루션
FileReader 개체의 readAsText()를 통해 파일의 텍스트를 읽을 수 있습니다. Blob 객체의 기능을 사용하여 파일을 다운로드하면 데이터 내보내기 파일을 로컬에 백업할 수 있습니다. 데이터를 복원해야 할 경우 입력을 통해 백업 파일을 업로드하고 readAsText()를 사용하여 텍스트를 읽은 후 복원할 수 있습니다. 데이터.
코드는 위와 유사한 기능을 갖고 있으므로 여기서는 반복하지 않겠습니다. 특정 애플리케이션에 대해서는 notepad
base64 인코딩을 지원하기 위해 HTML5에 atob 및 btoa 메소드가 추가되었습니다. 그들의 이름은 또한 인코딩과 디코딩을 나타내는 b에서 a로, a에서 b로 매우 간단합니다.
var a = "https://lin-xin.github.io";var b = btoa(a);var c = atob(b);console.log(a); // https://lin-xin.github.ioconsole.log(b); // aHR0cHM6Ly9saW4teGluLmdpdGh1Yi5pbw==console.log(c); // https://lin-xin.github.io
btoa 메서드는 a의 값을 변경하지 않고 문자열 a를 인코딩하고 인코딩된 값을 반환합니다.
atob 메소드는 인코딩된 문자열을 디코딩합니다.
하지만 매개변수에 8비트 ASCII 인코딩의 문자 범위를 초과하는 중국어 문자가 포함되어 있어 브라우저에서 오류를 보고합니다. 따라서 중국어는 먼저 encodeURIComponent로 인코딩되어야 합니다.
아아아아위 내용은 HTML5의 파일 업로드 및 다운로드 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
