zoukankan      html  css  js  c++  java
  • img标签显示本地文件

    html:

    <img src="__IMG__/male.png" id="imgfpic1" style="height: 100%;  auto; max- 100%;">
    <input type="file" id="pic" name="pic" onchange="setpreimg();" style="position:absolute; top: 0px; left: 0px; bottom: 0px; 100%; height: 100%; z-index: 999; opacity: 0;"/>

    js:
    //使用html5的FileReader属性
    if(window.FileReader){
    var oFReader = new window.FileReader(),
    rFilter = /^(?:image/bmp|image/cis-cod|image/gif|image/ief|image/jpeg|image/jpeg|image/jpeg|image/pipeg|image/png|image/svg+xml|image/tiff|image/x-cmu-raster|image/x-cmx|image/x-icon|image/x-portable-anymap|image/x-portable-bitmap|image/x-portable-graymap|image/x-portable-pixmap|image/x-rgb|image/x-xbitmap|image/x-xpixmap|image/x-xwindowdump)$/i;

    oFReader.onload = function (e) {
    $("#imgfpic1").attr('src', e.target.result);
    };

    var aFiles = document.getElementById("pic").files;
    if (aFiles.length === 0) { return; }
    if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; }
    oFReader.readAsDataURL(aFiles[0]);
    }








  • 相关阅读:
    A
    Hdu 1856(离散化+并查集)More is better
    Hat’s Words hdu-1247
    K
    I
    L
    F
    M
    Javascript 编码规范
    Chrome开发者工具之JavaScript内存分析
  • 原文地址:https://www.cnblogs.com/w10234/p/5671997.html
Copyright © 2011-2022 走看看