zoukankan      html  css  js  c++  java
  • 获取input file 选中的图片,并在一个div的img里面赋值src实现预览

    代码如下利用html5实现:几乎兼容所有主流浏览器,当然IE必须是IE 6以上

    【jquery代码】
    $(function() {
      $("#file_upload").change(function() {
        var $file = $(this);
        var fileObj = $file[0];
        var windowURL = window.URL || window.webkitURL;
        var dataURL;
        var $img = $("#preview");
     
        if(fileObj && fileObj.files && fileObj.files[0]){
          dataURL = windowURL.createObjectURL(fileObj.files[0]);
          $img.attr('src',dataURL);
        }else{
          dataURL = $file.val();
          var imgObj = document.getElementById("preview");
          // 两个坑:
          // 1、在设置filter属性时,元素必须已经存在在DOM树中,动态创建的Node,也需要在设置属性前加入到DOM中,先设置属性在加入,无效;
          // 2、src属性需要像下面的方式添加,上面的两种方式添加,无效;
          imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
          imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL; 
        }
      });
    });
    【html代码】:
    <input id="file_upload" type="file" />
    <div class="image_container">
    <img id="preview" width="60" height="60">
    </div>
  • 相关阅读:
    使用JQuery+HTML写一个简单的后台登录页面,加上对登录名和密码的前端校验。
    Shiro入门3
    Shiro入门2
    Shiro入门1
    Spring+SpringMVC+Mybatis整合 pom示例
    IO(1)----File类
    集合(3)—— Map
    集合(3)—— Set
    集合(2)——List集合
    集合(1)
  • 原文地址:https://www.cnblogs.com/gca123/p/7575713.html
Copyright © 2011-2022 走看看