JS+HTML5实现上传图片预览效果完整实例【测试可用】

本文实例讲述了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"/>
  <div id="preview" style="width: 300px;height:300px;border:1px solid gray;"></div>
</form>
</body>
</html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript+HTML5特效与技巧汇总》、《JavaScript图片操作技巧大全》、《JavaScript图形绘制技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • JS HTML5拖拽上传图片预览

    JS HTML5拖拽上传图片预览

    1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块.总之,file对象包含与FlieList对象,而file对象继承于Blob对象! 各对象的相关属性关系: FileReader接口: 由图可知:HTML5还提供了FileReader接口:用于将文件读入内存,并读取

  • JS+HTML5 FileReader实现文件上传前本地预览功能

    HTML5之FileReader的使用 HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调用其方法: 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new FileReader(); // add your code here } e

  • JS+HTML5实现图片在线预览功能

    本文实例为大家分享了HTML5图片在线预览的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>HTML5图片预览</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://img9.ton

  • js HTML5多图片上传及预览实例解析（不含前端的文件分割）

    本文实例为大家分享了js HTML5多图片上传及预览实例,供大家参考,具体内容如下 主要运用  1.HTML5 files可以选择多文件,以及获取多文件信息  2.XMLHTTPRequest对象,发送HTTP传输请求  3.将每一个文件放在FormData,进行传输  4.利用readAsDataURL将图片内容直接变成url,放在img标签的src当中,生成可预览的图片 html+css+js代码 <!DOCTYPE html> <head> <meta http-equ

  • JS+HTML5实现上传图片预览效果完整实例【测试可用】

    本文实例讲述了JS+HTML5实现上传图片预览效果.分享给大家供大家参考,具体如下: 在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件先上传上去然后返回地址再显示在页面上,这样就不太好,因为用户基本信息可能并没有保存,但是头像却已经改变,如果在需要改变就导致了多余图片的保存服务器. 在网上找了下解决方案,如下所示: <!DOCTYPE HTML> <html> <head> <meta charse

  • js兼容火狐显示上传图片预览效果的方法

    js兼容火狐显示上传图片预览效果的方法

    本文实例讲述了js兼容火狐显示上传图片预览效果的方法.分享给大家供大家参考.具体实现方法如下: <!doctype html> <html> <head> <meta content="text/html; charset=GBK" http-equiv="Content-Type" /> <title>Image preview example</title> <style type=&

  • javascript实现input file上传图片预览效果

    javascript实现input file上传图片预览效果

    本文实例介绍了javascript实现input file上传图片预览效果的详细代码,分享给大家供大家参考,具体内容如下 运行效果图: 具体实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="jquery-1.1

  • input type=file 选择图片并且实现预览效果的实例

    通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型,如:只要传图片,且不限制图片格式,为image/*: multiple:规定是否可以选择多个文件: 规定只可上传图片,且可以选择多个文件 <input type="file" accept="image/*" multiple="multiple"/> 当然,直接一个input type=file 只能选择上传的文件

  • js 上传文件预览的简单实例

    1. FILE API html5提供了FIle和FileReader两个方法,可以读取文件信息并读取文件. 2. example <html> <body> <div id="test-image-preview" style="border: 1px solid rgb(204, 204, 204); width: 100%; height: 200px; background-size: contain; background-repeat

  • js实现会跳动的日历效果(完整实例)

    js实现会跳动的日历效果(完整实例)

    一.简介 编写一个会动的日历,日历上面有年月日,周几,时分秒,效果如下: 年月日,周几,时分秒都会随着系统时间的走动而改变 二.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal

  • JavaScript图片上传并预览的完整实例

    JavaScript图片上传并预览的完整实例

    目录 一.前端界面是通过jqgrid展示的 二.jqgrid特性 三.代码实例 1.jqgrid页面展示 2.模块页面 3.ajax实现异步请求 五.效果展示 总结 一.前端界面是通过jqgrid展示的 jqgrid是典型的B/C架构(浏览器/服务器模式),服务器端只需提供数据管理,浏览器只需负责数据显示. jqGrid是用ajax实现对请求和响应的处理,支持局部实时刷新. 二.jqgrid特性 通过配置url地址数据显示格式 支持行编辑,列搜索过滤 支持分页 添加表单支持文件上传 链式调用 三

  • JavaScript+html5 canvas制作的百花齐放效果完整实例

    JavaScript+html5 canvas制作的百花齐放效果完整实例

    本文实例讲述了JavaScript+html5 canvas制作的百花齐放效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { border:5px solid gra

  • JS实现在状态栏显示打字效果完整实例

    JS实现在状态栏显示打字效果完整实例

    本文实例讲述了JS实现在状态栏显示打字效果.分享给大家供大家参考,具体如下: 这里演示JS实现带有打字特效的状态栏,在状态栏显示打字效果的文字,注意,此效果存在浏览器兼容性问题,在IE7或更高的浏览器下貌似不显示效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-status-bar-show-txt-print-demo/ 具体代码如下: <html> <head> <script language="J

  • JS实现的五级联动菜单效果完整实例

    JS实现的五级联动菜单效果完整实例

    本文实例讲述了JS实现的五级联动菜单效果.分享给大家供大家参考,具体如下: js实现多级联动的方法很多,这里给出一种5级联动的例子,其实可以扩展成N级联动,在做项目的时候碰到了这样一个问题但是有不能从数据库中动态的加载这些选项,所以只有想办法从单个的页面着手来处理了,应为项目的表单是动态产生的,所以需要每个流程的设计过程中需要有单独的页面来处理,这样就决定了不能改变已有的业务逻辑来实现多级表单的联动. 运行效果图如下: 完整代码如下: <html> <head> <title

随机推荐