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

    }

  • 相关阅读:
    深入浅出讲解 ElasticSearch的安装与使用【建议收藏】
    win10 elasticsearch安装IK中文分词器
    elasticsearch 使用过程中经常遇到的问题
    在给elasticsearch安装head插件时,npm install 版本不匹配
    elasticsearch.bat闪退的解决方案
    图文详解| Node.js安装及环境配置之Windows篇
    面试必备:秒杀场景九个细节
    vagrant 安装中遇到的问题
    2021 年上海市成人高校考试招生工作规定
    成考专科数学模拟试题一及答案
  • 原文地址:https://www.cnblogs.com/lanliying/p/5082298.html
Copyright © 2011-2022 走看看