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

查看全文

相关阅读:
顺序表的C语言实现
 Nginx模块开发（5）————开发简单的HTTP过滤模块
 python集合（set）
python——封装、解构
 python——杨辉三角
 python——bytes、bytearray
python算法——求10万以内的质数
 python算法——打印菱形、对等三角、闪电
 python字符串操作
 python—冒泡排序

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