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();
    }

    }

  • 相关阅读:
    如何在iTerm2中配置oh my zsh?
    sublime中格式化jsx文件
    ES6 new syntax of Literal
    ES6 new syntax of Rest and Spread Operators
    How to preview html file in our browser at sublime text?
    ES6 new syntax of Default Function Parameters
    ES6 new syntax of Arrow Function
    七牛云2018春招笔试题
    Spring-使用注解开发(十二)
    Spring-声明式事物(十一)
  • 原文地址:https://www.cnblogs.com/lanliying/p/5082298.html
Copyright © 2011-2022 走看看