美文网首页
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