美文网首页
input type="file" 选择图片

input type="file" 选择图片

作者: 积_渐 | 来源:发表于2018-08-30 11:43 被阅读27次

html部分:

<input style="display:none;" id="file-selector" type="file" multiple="multiple" accept="image/jpeg,image/jpg"/>
<img src=''/>

js部分:

<script>
    $('#file-selector').change(function(){
      var $file = $(this);
      var fileObj = $file[0];
      var windowURL = window.URL || window.webkitURL;
      var dataURL;
      var $img = $("img");
      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");
          imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
          imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
      }
    });
  </script>

相关文章

网友评论

      本文标题:input type="file" 选择图片

      本文链接:https://www.haomeiwen.com/subject/tfurwftx.html