h5的图片预览是个好东西，不需要保存到后台就能预览图片

代码也很短

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>图片上传预览</title>

<script type="text/javascript">

    function imgPreview(fileDom){

        //判断是否支持FileReader

        if (window.FileReader) {

            var reader = new FileReader();

        } else {

            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");

        }

        //获取文件

        var file = fileDom.files[0];

        var imageType = /^image\//;

        //是否是图片

        if (!imageType.test(file.type)) {

            alert("请选择图片！");

            return;

        }

        //读取完成

        reader.onload = function(e) {

            //获取图片dom

            var img = document.getElementById("preview");

            //图片路径设置为读取的图片

            img.src = e.target.result;

        };

        reader.readAsDataURL(file);

    }

</script>

</head>

<body>

    <img id="preview" />

    <br />

    <input type="file" name="file" onchange="imgPreview(this)" />

</body>

</html>

h5的图片预览的更多相关文章

  1. h5 js 图片预览并判断 ajax上传

    //建立一個可存取到該file的url function getObjectURL(file) { var url = null; if (window.createObjectURL != unde ...

  2. H5实现本地预览图片

    我们使用H5可以很容易的实现图片上传前对其进行预览的功能 Html代码如下: <!DOCTYPE html> <html lang="en"> <he ...

  3. 移动端 H5 拍照 从手机选择图片，移动端预览，图片压缩，图片预览，再上传服务器

    前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...

  4. H5图片预览、压缩、上传

    目标实现: 1.选择图片, 前端预览效果 2.图片大于1.2M的时候, 对图片进行压缩 3.以表单的形式上传图片 4.图片删除 预览效果图: 代码说明: 1.input:file选择图片 <!- ...

  5. H5图片预览功能

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. js实现移动端图片预览：手势缩放， 手势拖动，双击放大...

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  7. 浅谈js本地图片预览

    最近在工作中遇到一个问题,就是实现一个反馈页面,这个反馈页面的元素有反馈主题.反馈类型.反馈内容.反馈人联系电话以及反馈图片.前端将这些反馈的元素POST给后台提供的接口:实现这个工作的步骤就是:页面 ...

  8. JS魔法堂之实战：纯前端的图片预览

    一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...

  9. dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

随机推荐

  1. iOS safari 苹果手机如何阻止页面弹性“橡皮筋效果”？

    苹果上这个上下弹的效果对于有固定导航的页面,体验很不好 知乎上搜到一个并不是完美方案:https://www.zhihu.com/question/22256539 完美方案是有个国外插件叫:prev ...

  2. linux4.10.8 内核移植（一）---环境搭建及适配单板。

    一.环境搭建 源码包下载:git clone https://www.kernel.org/pub/linux/kernel/v4.x/linux-4.10.8.tar.gz 或者直接去kernel. ...

  3. android 简单的读写联系人

    一.读取联系人 (1).从raw_contact表读 contact_id (2).从data表中读取data1 (3).从mimetypes读取mimetype 1.AndroidManifest. ...

  4. Anaconda的安装和更新

    下载地址官网:https://www.anaconda.com/distribution/ 一.安装 二.下载安装完成后我们来检验一下是否安装成功 点击“开始” —— “Anaconda3(64-bi ...

  5. B - 集合选数 （状压DP）

    题目链接:https://cn.vjudge.net/contest/281960#problem/B 题目大意:中文题目 具体思路: 我们通过构造矩阵, x , 3x,9x,27x 2x,6x,18 ...

  6. Maven整合Spring3.0+Mybatis3.2+Struts2.3+查找坐标+jar包依赖(五)

    依赖传递 只添加了一个struts2-core依赖,发现项目中出现了很多jar,这种情况 叫 依赖传递

  7. 教你如何使用android studio发布release 版本【转】

    原文链接 想必还有人对如何在Android studio (以下简称as)发布release版本的app而狂刷百度吧?都是过来人,我很理解这种心情,百度到的基本是半成品,为什么这么说呢?百度一下,你就 ...

  8. fnmatch模块的使用

    fnmatch模块的使用 此模块的主要作用是文件名称的匹配,并且匹配的模式使用的unix shell风格.fnmatch比较简单就4个方法分别是:fnmatch,fnmatchcase,filter, ...

  9. 【转】Shell编程基础篇-上

    [转]Shell编程基础篇-上 1.1 前言 1.1.1 为什么学Shell Shell脚本语言是实现Linux/UNIX系统管理及自动化运维所必备的重要工具, Linux/UNIX系统的底层及基础应 ...

  10. kafka系列七、kafka核心配置

    一.producer核心配置 1.acks :发送应答(默认值:1) 生产者在考虑完成请求之前要求leader收到的确认的数量.这控制了发送的记录的持久性.允许以下设置: acks=0:设置为0,则生 ...