• 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;}

  • 相关阅读:
    Vue的响应式
    让html上两个元素在一行显示
    linux的<<命令
    http-only,withCredentials
    axios跨域请求时 withCredentials:true 表示request携带cookie
    异步代码async await阻塞进程的误区——await的是Promise的resolve而不是语句块的执行结束
    理解状态机
    关于express返回值的问题
    axios基本的get/post请求使用方法
    【转】 前端笔记之Vue(四)UI组件库&amp;Vuex&amp;虚拟服务器初识
  • 原文地址:https://www.cnblogs.com/songrimin/p/4514460.html
Copyright © 2020-2023  润新知