Discuss / JavaScript / 廖大一言不合就撸代码,看到HTML5的FILE API一脸懵逼的小伙伴们看这里.
Back

廖大一言不合就撸代码,看到HTML5的FILE API一脸懵逼的小伙伴们看这里.

Topic source

匿名sina网友V

#1 Created at ... [Delete] [Delete and Lock User]

我找到了一些参考资料.帮助大家理解本节的例程. 文件处理API参考

添加事件监听

事件类型

匿名sina网友V

#2 Created at ... [Delete] [Delete and Lock User] 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>文件api</title>
        <style>
#test-image-preview {
    width:500px;
    height:500px;
    border:1px solid #ff0000;
}

        </style>
        <script src="fileapi.js"></script>
    </head>
    <body>
        <div id="test-file-info"></div>
        <div id="test-image-preview"></div>
        <form action=""><input id="test-image-file" type="file"></form>
    </body>
</html>

fileapi.js

'use strict'

window.onload=function(){
    var fileInput = document.getElementById('test-image-file');
    var info = document.getElementById('test-file-info');
    var preview = document.getElementById('test-image-preview');


    fileInput.addEventListener('change',function(){
        console.log('change...');
        preview.style.backgroundImage='';
        if (!fileInput.value){
            info.innerHTML = '没有选择文件';
            return ;
        }
        var file = fileInput.files[0];
        info.innerHTML = '文件:' + file.name + '<br>'+'大小:'+file.size+'<br>'+'修改:'+file.lastModifiedDate;
        if(file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif'){
            alert('不是有效的图片文件!');
            return;
        }

        var reader = new FileReader();
        reader.onload=function(e){
            console.log('reader.onload');
            var data = e.target.result;
            preview.style.backgroundImage='url('+ data +')';
        };
        reader.readAsDataURL(file);
    });
};

ApacheTomCat

#3 Created at ... [Delete] [Delete and Lock User]

谢谢。

  • 1

Reply