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>
  • 相关阅读:
    数学系列:数学在计算机图形学中的应用
    数学系列:数学体系概览
    Math: Fibonacci
    算法系列:电磁频谱划分
    计算机系列:CUDA 深入研究
    算法系列:寻找最大的 K 个数
    算法系列:000
    算法系列:三元组和
    算法系列:单链表逆序
    堆栈区别
  • 原文地址:https://www.cnblogs.com/gca123/p/7575713.html
Copyright © 2011-2022 走看看