zoukankan      html  css  js  c++  java
  • image即时上传

    function preview_upload(input, img_div_id){
            var img_id = img_div_id.replace("itempic_previewDiv", "itempic_preview")
            var width_str = "120px"
            var height_str = "120px"
            previewPic(input, img_div_id, img_id, width_str, height_str);
        }
        
        
        function previewPic(input, img_div_id, img_id, width_str, height_str) {
          //$("#localImag").html('<img id="img_prev" src="#" /><img src="/assets/touming.png"/>');          
          if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $("#" + img_id).attr('src', e.target.result);
                };
            reader.readAsDataURL(input.files[0]);
          }else{
            // var imgObjPreview=document.getElementById("img_prev");
            var imgObjPreview=document.getElementById(img_id);
            //IE下,使用滤镜
            input.select();
    
            var imgSrc = document.selection.createRange().text;
            // var localImagId = document.getElementById("localImag");
            var localImagId = document.getElementById(img_div_id);
            //必须设置初始大小
            localImagId.style.width = width_str;
            localImagId.style.height = height_str;
            //图片异常的捕捉,防止用户修改后缀来伪造图片
            try{
              localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
              localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
            }catch(e){
              alert("您上传的图片格式不正确,请重新选择!");
              return false;
            }
            imgObjPreview.style.display = 'none';
            document.selection.empty();
          }
          return true;
        }

    html部分

    <div class="by_jsq_top">
    <div class="by_jsq_top_img" id="itempic_previewDiv"><img src="images/69.png" id="itempic_preview"></div>
    <input type="file" name="user[logo]" class="file5" onchange="preview_upload(this, 'itempic_previewDiv')">
    </div>

    css部分

    .file5{position: absolute; top: 80px; left: 50%; 40px; height: 40px; margin-left: -20px; opacity: 0;}

  • 相关阅读:
    03-hibernate注解-关系映射级别注解-一对一
    02-hibernate注解-属性级别注解
    linux下使用vim替换文件中的^M换行符
    maven项目中找不到Maven Dependencies解决办法
    软件设计师教程(第5版)- 前言和目录
    wireshark抓包分析工具的使用
    Tcpdump抓包工具的使用
    如何使用maven优雅地管理项目版本号
    Linux系统盘扩容-物理机非虚拟机
    eclipse下安装windowbuilder(一定要看)
  • 原文地址:https://www.cnblogs.com/songrimin/p/4514460.html
Copyright © 2011-2022 走看看