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

  • 相关阅读:
    JQuery实现模糊查询关键字高亮输入框
    jq--实现自定义下拉框
    js 实现颜色值格式转换 rgb和十六进制的转换
    原生JavaScript设置、获取 单选框、复选框 的值
    win10 开启端口,auto.js端口
    AES的加密和解密(Java and javascript)
    去除移动端 alert / confirm 显示的 url
    移动端拖拽
    前台传入base64图片,java后台转为MultipartFile文件
    移动端调试vConsole
  • 原文地址:https://www.cnblogs.com/songrimin/p/4514460.html
Copyright © 2020-2023  润新知