HTML5 FileAPI 그래픽 및 텍스트 코드 공유-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

HTML5 FileAPI 그래픽 및 텍스트 코드 공유

黄舟

Mar 28, 2017 pm 04:00 PM

HTML5에서는 파일 작업에 대한 API를 제공합니다. 이 API를 통해 웹 페이지에서 로컬 파일 시스템에 액세스하는 관련 처리가 매우 간편해집니다. 단순한. 지금까지는 일부 브라우저에서만 이를 지원합니다.

1.File List 객체 및 File 객체

FileList 객체는 사용자가 선택한 파일 목록을 나타냅니다. , HTML4에서는 파일 컨트롤에 하나의 파일만 배치할 수 있지만 HTML5에서는 multiple 속성을 추가하여 파일 컨트롤에 여러 개의 파일을 배치할 수 있습니다. 컨트롤에서 사용자가 선택한 각 파일은 파일 개체이고 FileList는 사용자가 선택한 모든 파일을 나타내는 이러한 파일 개체의 목록입니다. 파일 객체에는 두 가지 속성이 있습니다. 하나는 파일 이름에 파일 경로가 포함되지 않음을 의미하는 name이고, 다른 하나는 파일이 마지막으로 수정된 날짜를 의미하는 lastModifiedDate입니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset=&#39;UTF-8&#39;/>
        <title>FileList and File </title>
        <script type="text/javascript" language="JavaScript">
function showFiles(){
var file,
                len = document.getElementById(&#39;file&#39;).files.length;//返回FileList文件列表对象
for (var i=0; i < len; i++) {
                  file = document.getElementById(&#39;file&#39;).files[i];
                  alert(file.name);
                };
                
            }            
</script>               
    </head>
    <body>
        <input type="file" id=&#39;file&#39; 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(&#39;file&#39;).files[0];
                var size = document.getElementById(&#39;fileType&#39;);
                var type = document.getElementById(&#39;fileSize&#39;);
                size.innerHTML = file.size;
                type.innerHTML = file.type;
            }

로그인 후 복사

이미지 유형 파일의 경우 Blob 객체의 유형 속성은 image/로 시작합니다. 이 기능을 사용하여 사용자가 선택한 파일 유형을 결정할 수 있습니다.

function showFileInfo(){
                var file = document.getElementById(&#39;file&#39;).files[0];
                if(checkImage(file)){
                var size = document.getElementById(&#39;fileType&#39;);
                var type = document.getElementById(&#39;fileSize&#39;);
                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개는

파일 읽기에 사용되고 1개는 파일 읽기를 중단합니다.

方法名	参数	描述
readAsBinaryString()	file	将文件读取为二进制字符串，通常将它传到后端，后端可以通过这段字符串存储文件
readAsDataURL()	file	将文件读取为一段data url字符串，事实上是将小文件以一种特格式的URL地址直接读取到页面。小文件通常指图片与html等格式文件
readAsText()	file [encoding]	将文件以文本的方式读取，其中第二个参数为文本的编码。
abort()	(none)	中断读取操作。

읽기 성공 여부에 관계없이 메소드는 읽기 결과를 반환하지 않으며, 결과는 결과 속성에 반환됩니다.

　3.2 인터페이스

이벤트

　FileReader 인터페이스는 파일을 읽을 때 상태를 캡처하기 위한 완전한 이벤트 모델 세트를 제공합니다.

事件	描述
onabort	数据读取中断时发生
onerror	数据读取出错时发生
onloadstart	数据读取开始时发生
onload	数据读取成功完成时发生
onloadend	数据读取完成时发生无论读取成功还是失败
onprogess	数据读取中

　3.3 예시

<!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(&#39;file&#39;).files[0];
                 result = document.getElementById(&#39;result&#39;);
            }
if(typeof FileReader == &#39;undefined&#39;){
                result.innerHTML = "你的浏览器不支持 FileReader";
                file.setAttribute("disabled","disabled");
            }
function readAsDataURL(){
if(!/image\/\w+/.test(file.type)){
                    alert(file.name + &#39;不是一个图片类型的文件&#39;);
                }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=&#39;file&#39;/>
            <input type=&#39;button&#39; 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으로 문의하세요.