dede前台图片实现JS预览
未知
2019-03-15 20:14:18
0
问题描述:
      织梦前台会员上传缩略图或者其他图片的时候,一般会显示文件名,看不到图片。下面就用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前台图片实现JS预...
问题描述: 织梦前台会员上传缩略图或者其他图片的时候,一般会显示文...
2019-03-15 20:14:18

热门资讯

dedecms织梦上传缩略图没... 问题描述: dedecms织梦发布文章页面,表单缩略图在[站内选择]点击后,上传图片后没图片。或者修...
织梦后台一键更新所有出现空白问... 问题描述: 我织梦后台更新所有的时候,只更新到id为4 之后就成为空白 没有下文了,这是什么情况? ...
百度搜索网站后点击跳转到彩票赌... 问题描述: 在公司有一个官网,近期总是有人 告诉我,在百度搜索网站名称,点击后网站跳转到彩票赌博类网...
dede织梦后台添加文章,提示... 问题描述: 安装dedecms织梦的时候,一切安装完成,进入后台添加网站栏目,在网站栏目下添加文章的...
dede删除会员文章中的图片 问题描述: 会员在删除自己写的文章的时候,一般只会删除缩略图,并不会删除文章中的图片,这就造成了图片...
dede织梦 跳转指定页面并刷... 问题描述: 在给评论添加回复功能的时候,遇到了跳转问题。评论区是在artilce_article.h...
织梦dedecms添加或者增加... 第一步:执行SQL命令为数据库的栏目表结构添加一个字段(执行选多行命令),在后台也可以在数据库里面也...
dede PDF下载在线浏览 问题描述: 在普通文章内容模型中添加一个字段,上传PDF文件。 解决办法: 第一步: 在后台打开附件...
dedecms调用评论最多的文... dede cms评论最多的文章排行版代码调用,并且调用第一条评论内容。 { dede : sql s...
dede织梦使channela... 在dedecms织梦5,3手册中,我们可以看到只有channel标签可以支持currentstyle...