如何给上传的图片添加一个简单的预览功能

下面是index.jsp页面:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>上传Excel表格测试</title>
  <script src="js/jquery-1.12.4.js"></script>
  </head>
  <body>

  <h3>测试</h3>
  <form action="UpdFile?opr=getParam" enctype="multipart/form-data"
        method="post">
      上传图片:<input type="file" value="选择文件" name="fName" id="userface" onchange="preview(this)"><br>
      <div id="preview"></div>
      <input type="submit" value="提交" id="button">
  </form>
  </body>


需要添加一个事件οnchange="preview(this)"和一个展示图片的div,

,当选中图片的时候触发事件显示在div中:
下面是关键的οnchange=“preview(this)”:

<script>
        function preview(file) {
            var prevDiv = document.getElementById('preview');
            if (file.files && file.files[0]) {
                var reader = new FileReader();
                reader.onload = function (evt) {
                    prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
                }
                reader.readAsDataURL(file.files[0]);
            } else {
                prevDiv.innerHTML = '<div class="img" width="100" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
            }
        }
    </script>

大家可以自己尝试一下,有很多种方法都可以实现加载图片的效果的!

发布了152 篇原创文章 · 获赞 141 · 访问量 6万+

猜你喜欢

转载自blog.csdn.net/qq_44739706/article/details/104931570
今日推荐