zoukankan      html  css  js  c++  java
  • 图片上传显示图片

    <tr>
    <td align='left'>手持证件照:</td>
    <td>
    <input type="file" name="photo" id="idphotoView" onchange="idphotoChange(this.id,'imgPre');" />
    <img id="imgPre" src="" style="display: block;" />
    </td>
    </tr>

    方法
    <script>
    function idphotoChange(sourceId, targetId) {
    if (typeof FileReader === 'undefined') {
    alert('你的浏览器不支持FileReader接口!');
    return;
    }
    // var reader = new FileReader();
    // reader.onload = function(e) {
    // var img = document.getElementById(targetId);
    // img.src = this.result;
    // }
    // reader.readAsDataURL(document.getElementById(sourceId).files[0]);
    //检验是否为图像文件
    var file = document.getElementById(sourceId).files[0];
    if(!/image/w+/.test(file.type)){
    alert("看清楚,这个需要图片!");
    thisa.value=""
    return false;
    }
    var reader = new FileReader();
    //将文件以Data URL形式读入页面
    reader.readAsDataURL(file);
    reader.onload=function(e){
    //显示文件
    var img = document.getElementById(targetId);
    img.src = this.result;
    // result.innerHTML='<img src="' + this.result +'" alt="" />';

    }
    }
    </script>


    《===============================FileReader接口的使用==================================================》
    <script type="text/javascript">
    var result=document.getElementById("result");
    var file=document.getElementById("file");

    //判断浏览器是否支持FileReader接口
    if(typeof FileReader == 'undefined'){
    result.InnerHTML="<p>你的浏览器不支持FileReader接口!</p>";
    //使选择控件不可操作
    file.setAttribute("disabled","disabled");
    }

    function readAsDataURL(){
    //检验是否为图像文件
    var file = document.getElementById("file").files[0];
    if(!/image/w+/.test(file.type)){
    alert("看清楚,这个需要图片!");
    return false;
    }
    var reader = new FileReader();
    //将文件以Data URL形式读入页面
    reader.readAsDataURL(file);
    reader.onload=function(e){
    var result=document.getElementById("result");
    //显示文件
    result.innerHTML='<img src="' + this.result +'" alt="" />';
    }
    }

    function readAsBinaryString(){
    var file = document.getElementById("file").files[0];
    var reader = new FileReader();
    //将文件以二进制形式读入页面
    reader.readAsBinaryString(file);
    reader.onload=function(f){
    var result=document.getElementById("result");
    //显示文件
    result.innerHTML=this.result;
    }
    }

    function readAsText(){
    var file = document.getElementById("file").files[0];
    var reader = new FileReader();
    //将文件以文本形式读入页面
    reader.readAsText(file);
    reader.onload=function(f){
    var result=document.getElementById("result");
    //显示文件
    result.innerHTML=this.result;
    }
    }
    </script>
    <p>
    <label>请选择一个文件:</label>
    <input type="file" id="file" />
    <input type="button" value="读取图像" onclick="readAsDataURL()" />
    <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />
    <input type="button" value="读取文本文件" onclick="readAsText()" />
    </p>
    <div id="result" name="result"></div>

  • 相关阅读:
    自定义的tabBarController的几种方法
    JAVA如何把一个float四舍五入到小数点后2位,4位,或者其它指定位数.
    ALAssetsLibrary使用
    UITabBarController详解
    学习笔记:Tab Bar 控件使用详解
    iOS开发 跳转场景的三种方式
    Java中文件与字节数组转换
    'NSUnknownKeyException', reason:....etValue:forUndefinedKey:]: this class is not key value coding-compliant for the key
    开源项目
    object-c的异常处理机制
  • 原文地址:https://www.cnblogs.com/yu-hailong/p/7441499.html
Copyright © 2011-2022 走看看