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

    }

  • 相关阅读:
    react Native 运行报错之一 gradle-2.14.1-all解压失败的问题
    react native windows create bundle folder
    gulp+browserSync+nodemon 实现express 全端自动刷新的实践
    nodejs框架express4.x 学习--安装篇
    转: angularjs 指令中动态编译的方法(适用于有异步请求的情况) 内嵌指令无效
    angular 基础练习
    自己写的数组排重+排序
    前端开发bower包管理器
    定位网站性能的一些经验
    记一次大规模数据迁移和加密
  • 原文地址:https://www.cnblogs.com/lanliying/p/5082298.html
Copyright © 2011-2022 走看看