Javascript对文件的操作

最新推荐文章于 2024-02-23 14:14:25 发布

no-96

最新推荐文章于 2024-02-23 14:14:25 发布

阅读量675

点赞数 1

分类专栏： Javascript 文章标签： javascript 图片

本文链接：https://blog.csdn.net/qq_14998713/article/details/52932900

版权

Javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>
<h1>上传图片并显示</h1>
<form action="index.html" method="post" enctype="multipart/form-data">
    <p>图片预览</p>
    <p>
    <div id = "test-image-preview"style="border: 1px solid #ccc; width: 100%; height: 200px; background-size: contain; background-repeat: no-repeat; background-position: center center;">

    </div>
    </p>
    <input type="file" id = "test-image-file" name = "test">
    <p id="test-file-info"></p>
</form>
<script src="scripts/dofile.js"></script>
</body>
</html>

var
    fileInput = document.getElementById('test-image-file'),
    info = document.getElementById('test-file-info'),
    preview = document.getElementById('test-image-preview');
// 监听change事件:
fileInput.addEventListener('change', function () {
    // 清除背景图片:
    preview.style.backgroundImage = '';
    // 检查文件是否选择:
    if (!fileInput.value) {
        info.innerHTML = '没有选择文件';
        return;
    }
    // 获取File引用:
    var file = fileInput.files[0];
    // 获取File信息:
    info.innerHTML = '文件: ' + file.name + '<br>' +
        '大小: ' + file.size + 'b' + '<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) {
        var
            data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'
        preview.style.backgroundImage = 'url(' + data + ')';
    };
    // 以DataURL的形式读取文件:
    reader.readAsDataURL(file);
});