HTML5 FileAPI 그래픽 및 텍스트 코드 공유
- 黄舟원래의
- 2017-03-28 16:00:281705검색
HTML5에서는 파일 작업에 대한 API를 제공합니다. 이 API를 통해 웹 페이지에서 로컬 파일 시스템에 액세스하는 관련 처리가 매우 간편해집니다. 단순한. 지금까지는 일부 브라우저에서만 이를 지원합니다.
FileList 객체는 사용자가 선택한 파일 목록을 나타냅니다. , HTML4에서는 파일 컨트롤에 하나의 파일만 배치할 수 있지만 HTML5에서는 multiple 속성을 추가하여 파일 컨트롤에 여러 개의 파일을 배치할 수 있습니다. 컨트롤에서 사용자가 선택한 각 파일은 파일 개체이고 FileList는 사용자가 선택한 모든 파일을 나타내는 이러한 파일 개체의 목록입니다. 파일 객체에는 두 가지 속성이 있습니다. 하나는 파일 이름에 파일 경로가 포함되지 않음을 의미하는 name이고, 다른 하나는 파일이 마지막으로 수정된 날짜를 의미하는 lastModifiedDate입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<title>FileList and File </title>
<script type="text/javascript" language="JavaScript">
function showFiles(){
var file,
len = document.getElementById('file').files.length;//返回FileList文件列表对象
for (var i=0; i < len; i++) {
file = document.getElementById('file').files[i];
alert(file.name);
};
}
</script>
</head>
<body>
<input type="file" id='file' multiple="multiple" width="80px"/>
<input type="button" id="bt1" value="click" onclick="showFiles();"/>
</body>
</html>2. Blob 객체
Blob 객체라고 하면 OracleDB의 Blob 필드를 떠올리는 분들이 있는데, 의미가 다소 비슷합니다. HTML5의 Blob은 바이너리 원시 데이터를 나타냅니다. 이는 바이트 내부의 원시 데이터 블록에 액세스할 수 있는 슬라이스() 메서드를 제공합니다. 실제로 위에서 언급한 file 객체는 Blob 객체를 상속받습니다.
Blob 객체의 두 가지 속성인 size: 객체의 바이트 길이를 나타냅니다. 유형: 객체의 MIME 유형을 나타냅니다. 유형을 알 수 없으면 빈문자열 이 반환됩니다.
function showFileInfo(){
var file = document.getElementById('file').files[0];
var size = document.getElementById('fileType');
var type = document.getElementById('fileSize');
size.innerHTML = file.size;
type.innerHTML = file.type;
}
function showFileInfo(){
var file = document.getElementById('file').files[0];
if(checkImage(file)){
var size = document.getElementById('fileType');
var type = document.getElementById('fileSize');
size.innerHTML = file.size;
type.innerHTML = file.type;
}
else{
return ;
}
}
function checkImage(file){
if(!/img\/\w+/.test(file.type)){
alert(file.name + "不是图片");
return false;
}
return true;
} 또한 파일 컨트롤은 HTML5 표준에 accept 속성을 추가하여 허용되는 파일 형식을 제한하지만 현재 각 브라우저의 정렬 지원은 파일을 열 때 이미지 파일의 기본 선택으로 제한됩니다. 선택 창. 다른 유형을 선택하면 컨트롤도 이를 받아들일 수 있습니다. 3.FileReader 인터페이스 3.1 인터페이스 메소드 FileReader 인터페이스는 4가지 메소드를 제공하며, 그 중 3개는
| 方法名 | 参数 | 描述 |
| readAsBinaryString() | file | 将文件读取为二进制字符串，通常将它传到后端，后端可以通过这段字符串存储文件 |
| readAsDataURL() | file | 将文件读取为一段data url字符串，事实上是将小文件以一种特格式的URL地址直接读取到页面。小文件通常指图片与html等格式文件 |
| readAsText() | file [encoding] | 将文件以文本的方式读取，其中第二个参数为文本的编码。 |
| abort() | (none) | 中断读取操作。 |
| 事件 | 描述 |
| onabort | 数据读取中断时发生 |
| onerror | 数据读取出错时发生 |
| onloadstart | 数据读取开始时发生 |
| onload | 数据读取成功完成时发生 |
| onloadend | 数据读取完成时发生无论读取成功还是失败 |
| onprogess | 数据读取中 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>FileReader</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<script type="text/javascript" language="JavaScript">
var file ,
result;
function myLoad() {
file = document.getElementById('file').files[0];
result = document.getElementById('result');
}
if(typeof FileReader == 'undefined'){
result.innerHTML = "你的浏览器不支持 FileReader";
file.setAttribute("disabled","disabled");
}
function readAsDataURL(){
if(!/image\/\w+/.test(file.type)){
alert(file.name + '不是一个图片类型的文件');
}else{
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
result.innerHTML = "<img src=" + reader.result +"/>";
};
}
}
function readAsBinaryString(){
var reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = function(e){
result.innerHTML = reader.result;
};
}
function readAsText(){
var reader = new FileReader();
reader.readAsText(file);
reader.onload=function(e){
result.innerHTML = reader.result;
};
}
</script>
</head>
<body onload="myLoad();">
<p>
<input type="file" id='file'/>
<input type='button' id="bt_DataURL" value="读取图片" onclick="readAsDataURL();"/>
<input type="button" id="bt_BinaryString" value="读取二进制字符串" onclick="readAsBinaryString();"/>
<input type="button" id="bt_textString" value="读取文本信息" onclick="readAsText();"/>
</p>
<div id="result">
</div>
</body>
</html>위 내용은 HTML5 FileAPI 그래픽 및 텍스트 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.