Jquery中文网 www.jquerycn.cn
Jquery中文网 >  前端编程  >  HTML5教程  >  正文 利用JS HTML5实现图片上传预览效果(实例)

利用JS HTML5实现图片上传预览效果(实例)

发布时间:2020-07-23   编辑:www.jquerycn.cn
jquery中文网为您提供利用JS HTML5实现图片上传预览效果(实例)等资源,欢迎您收藏本站,我们将为您提供最新的利用JS HTML5实现图片上传预览效果(实例)资源
这篇文章主要介绍了JS HTML5实现上传图片预览效果,结合完整实例形式分析了javascript上传图片本地预览的具体操作步骤与相关实现技巧,需要的朋友可以参考下

本文实例讲述了JS HTML5实现上传图片预览效果。分享给大家供大家参考,具体如下:

在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能;之前的做的一个解决方案是文件先上传上去然后返回地址再显示在页面上,这样就不太好,因为用户基本信息可能并没有保存,但是头像却已经改变,如果在需要改变就导致了多余图片的保存服务器。

在网上找了下解决方案,如下所示:

<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
  <title>html5 图片上传预览</title>
  <style>
    #preview {
      width: 300px;
      height: 300px;
      overflow: hidden;
    }
    #preview img {
      width: 100%;
      height: 100%;
    }
  </style>
  <script src="jquery-1.7.2.min.js"></script>
  <script type="text/javascript">
    function preview1(file) {
      var img = new Image(), url = img.src = URL.createObjectURL(file)
      var $img = $(img)
      img.onload = function() {
        URL.revokeObjectURL(url)
        $('#preview').empty().append($img)
      }
    }
    function preview2(file) {
      var reader = new FileReader()
      reader.onload = function(e) {
        var $img = $('<img>').attr("src", e.target.result)
        $('#preview').empty().append($img)
      }
      reader.readAsDataURL(file)
    }
     
    $(function() {
      $('[type=file]').change(function(e) {
        var file = e.target.files[0]
        preview1(file)
      })
    })
  </script>
</head>
<body>
<form enctype="multipart/form-data" action="" method="post">
  <input type="file" name="imageUpload"/>
  <p id="preview" style="width: 300px;height:300px;border:1px solid gray;"></p>
</form>
</body>
</html>

以上就是利用JS HTML5实现图片上传预览效果(实例)的详细内容,更多请关注jQuery中文网其它相关文章!

-->
  • 本文原创发布jQuery中文网,转载请注明出处,感谢您的尊重!
  • 您可能感兴趣的文章:
    利用JS HTML5实现图片上传预览效果(实例)
    HTML5实现预览本地图片
    js上传图片预览
    html5和js绘制图片到canvas的方法
    js image对象预加载图片的方法详解
    html5 canvas和JavaScript如何实现本地截图
    关于HTML5实现图片压缩上传功能
    在canvas上实现元素图片镜像翻转动画效果的方法
    html5实现把上传的图片转成base64编码在显示(代码实例)
    移动端利用H5实现压缩图片上传的功能

    [关闭]