zoukankan      html  css  js  c++  java
  • 图片预览

    <div class="return_right">
    <div class="img_box">
    <input type="button" value="上传" class="img_pointer"/>
    <input type="file" name="upload1" id="upload1" class="up_btn" onchange="javascript:setImagePreview1(this);"/>
    </div><img id="preview1" alt="" class="up_img"/>
    <div class="img_box">
    <input type="button" value="上传" class="img_pointer"/>
    <input type="file" name="upload2" id="upload2" class="up_btn" onchange="javascript:setImagePreview2(this);"/>
    </div><img id="preview2" alt="" class="up_img"/>
    <div class="img_box">
    <input type="button" value="上传" class="img_pointer"/>
    <input type="file" name="upload3" id="upload3" class="up_btn" onchange="javascript:setImagePreview3(this);"/>
    </div><img id="preview3" alt="" class="up_img"/>
    </div>

    function checkType(upload){
    var image = document.getElementById(upload).value;
    var extStart = image.lastIndexOf(".");
    var ext = image.substring(extStart, image.length).toUpperCase();
    if ( ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") {
    alert("图片限于png,gif,jpeg,jpg格式!");
    return false;
    }
    return true;
    }
    function setImagePreview1(docObj) {
    var imgObjPreview=document.getElementById("preview1");

    if(docObj.files && docObj.files[0]){
    try{
    imgObjPreview.src = docObj.files[0].getAsDataURL();
    }catch(e){
    //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
    imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
    }
    }else{
    //IE下,使用滤镜
    docObj.select();
    var imgSrc = document.selection.createRange().text;
    //图片异常的捕捉,防止用户修改后缀来伪造图片
    try{
    imgObjPreview.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
    imgObjPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
    }catch(e){
    alert("您上传的图片格式不正确,请重新选择!");
    return false;
    }

    document.selection.empty();
    }

    }

  • 相关阅读:
    Linux下C语言的调试--转
    linux下c的网络编程---转载
    redis学习资料
    Keepalived配置与使用--转载
    Redis configuration
    keepalived程序包
    Keepalived 使用指南
    myeclipse解决JSP文件script调整背景颜色
    java 面试题汇总(未完成)
    c++ primer plus(文章6版本)中国版 编程练习答案第八章
  • 原文地址:https://www.cnblogs.com/lanliying/p/5082298.html
Copyright © 2011-2022 走看看