图片上传显示在指定的位置

最新推荐文章于 2021-01-27 08:29:27 发布

chiyehuo9692

最新推荐文章于 2021-01-27 08:29:27 发布

阅读量434

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/4005929/blog/3012014

版权

<div id="wrap">
   <div class="rty">

   </div>
</div>

<div id="dope"></div>

<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<script>

      var  str ='';
      str += '<input type="file" name="image" onchange="previewFile()" value="添加"/>';
      $('.rty').append(str);

      function previewFile() {


        var curPageUrl = window.document.location.href;
        // var rootPath = curPageUrl.split("//")[0] + curPageUrl.split("//")[1].split("/")[0] 
        //         + curPageUrl.split("//")[1].split("/")[1];
        // return rootPath;

          var dope = $('#dope');
          // 通过标签选择器获取HTML元素
          var file = document.querySelector('input[type=file]').files[0];


          // 图片文件不空就显示
          if (file) {

            // Js内置文件流
            var reader = new FileReader();
            reader.readAsDataURL(file);
                
              // 更新img标签的src属性为图片的本地路径，就可以显示了
              reader.onloadend = function () {
                  var er = '';
                  // er += '<img  src="'+reader.result+'" height="100" width="200" id="btnImg"/>';
                  er += '<a href="'+reader.result+'">'+file.name+'</a>';
                  dope.append(er);
              }
          } else {
              // 图片文件是空的
              preview.src = "";
          }
      }
</script>

转载于:https://my.oschina.net/u/4005929/blog/3012014