dede前台图片实现JS预览

发布时间:2019-03-15作者:小灵龙点击:72

问题描述:
      织梦前台会员上传缩略图或者其他图片的时候,一般会显示文件名,看不到图片。下面就用JS实现图片预览。

解决办法:
         <dd>
        <span class="dlleft">文章封面<b>*</b></span>
        <span class="dlright">
            <input type="file" name="litpic" id="litpic" onchange="LitPic(this)" accept="image/*"/>
            <cite id="show1"></cite>
            <cite>缩略图尺寸200*150像素</cite>
            <div class="upview" id="upw1"></div>
        </span>
      </dd>
              <?php if($row['litpic']!='')

          {
          ?>
            <dd>
               <span class="dlleft">预览缩略图<b>*</b></span>

               <span class="dlright"> 

               <img name="nlitpic"  id="nlitpic" src='<?php  echo $row['litpic'];  ?>' style="width: 200px; height:150px" /></span>

            </dd>
        <?php } ?>

SCRIPT 代码

                <script type="text/javascript">            

            //判断浏览器是否支持FileReader接口

            if (typeof FileReader == 'undefined') {

                document.getElementById("xmTanDiv").InnerHTML = "<h1>当前浏览器不支持FileReader接口</h1>";

                //使选择控件不可操作

                document.getElementById("litpic").setAttribute("disabled", "disabled");

            }



            //选择图片,马上预览

            function LitPic(obj) {

                var file = obj.files[0];
                console.log(obj);console.log(file);
                console.log("file.size = " + file.size);  //file.size 单位为byte
                var reader = new FileReader();

                //读取文件过程方法
                reader.onloadstart = function (e) {
                    console.log("开始读取....");
                }
                reader.onprogress = function (e) {
                    console.log("正在读取中....");
                }
                reader.onabort = function (e) {
                    console.log("中断读取....");
                }

                reader.onerror = function (e) {
                    console.log("读取异常....");
                }

                reader.onload = function (e) {
                    console.log("成功读取....");
                    var img = document.getElementById("nlitpic");
                    img.src = e.target.result;
                    //或者 img.src = this.result;  //e.target == this
                }
                reader.readAsDataURL(file)
            }
        </script>
扩展:另外一个jquery,当上传图片的时候实现预览。
第一步:引入jquery文件,
第二步:html代码。


      <img id="img" src="/tuan/code/code1.jpg">

    <input  type="file" name="face" id="face">
第三步:jquery代码。

<script type="text/javascript">
    
    function previewFile() {
    var preview = document.querySelector('#img');//img的ID
    var file    = document.querySelector('#face').files[0];//输入框file的ID
    var reader  = new FileReader();

      reader.onloadend = function () {
        preview.src = reader.result;
      }

      if (file) {
        reader.readAsDataURL(file);
      } else {
        preview.src = "";
      }
    }
</script>
标签:dede预览图片,图片预览