zoukankan html css js c++ java

读取图片文件--实例

网上搜的资料一大堆，但很多都是不完整或者不能用的，自己做了一个简单的版本。

html:

<input type="file" id="to-upload">
    <div><img src="" alt="" id="myimg"><span id="img-msg"></span></div>

js:

var oUpload = document.getElementById('to-upload');
        var oImg = document.getElementById('myimg');
        var oMsg = document.getElementById('img-msg');

        oUpload.onchange = function () {
            var file = this.files[0];

             var oFile = new FileReader();

             //将文件转成某种能识别的URL地址
             oFile.readAsDataURL(file);
             oFile.onload = function (ev) {
                  oImg.src = ev.target.result;
                  oMsg.innerHTML = (ev.total / 1024).toFixed(2) + 'KB';
             }
        };

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="file" id="to-upload">
    <div><img src="" alt="" id="myimg"><span id="img-msg"></span></div>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        var oUpload = document.getElementById('to-upload');
        var oImg = document.getElementById('myimg');
        var oMsg = document.getElementById('img-msg');

        oUpload.onchange = function () {
            var file = this.files[0];

             var oFile = new FileReader();

             //将文件转成某种能识别的URL地址
             oFile.readAsDataURL(file);
             oFile.onload = function (ev) {
                  oImg.src = ev.target.result;
                  oMsg.innerHTML = (ev.total / 1024).toFixed(2) + 'KB';
             }
        };
    </script>

</body>
</html>

参考：

http://www.cnblogs.com/liaojh/p/5209433.html

http://www.cnblogs.com/tugenhua0707/p/3568134.html

查看全文

相关阅读:
第9章垄断市场中的企业决策
 第8章完全竞争市场中的企业决策
 第7章生产产出的决策分析
 第6章成本分析
 第5章生产要素投入的决策分析
 C++_函数指针的内容和应用
 大数据的框架-流程梳理
 数字图像处理_基本概念
 C++_项目开发与Cmake构建工具
 终端--通信和传输协议

原文地址：https://www.cnblogs.com/masita/p/5810484.html