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. JavaScript之this,call,apply

    this:被调用的上下文对象: apply与call:切换被调用的上下文对象,即 调用时,this被临时性地切换 //demo 1 [call] function forEach(list,callb ...

  2. [C++]指针与引用（应用辨析）

    1.指针变量允许将一个整数经强制转换后赋值给指针变量    Eg:      float *fp;      fp = (float *)5000;//意义:将5000作为一个地址赋给指针变量fp 2 ...

  3. jQuery - ajaxUpLoad.js

    ajaxFileUpload是一个异步上传文件的jQuery插件 语法:$.ajaxFileUpload([options]) options参数说明: 参数 作用 url 上传处理程序地址 file ...

  4. Linux命令行与shell脚本编程大全.第3版(文字版) 超清文字-非扫描版 [免积分、免登录]

    此处免费下载,无需账号,无需登录,无需积分.收集自互联网,侵权通知删除. 点击下载:Linux命令行与shell脚本编程大全.第3版 (大小:约22M)

  5. Android中的Service：Binder，Messenger，AIDL

    http://blog.csdn.net/luoyanglizi/article/details/51594016 http://blog.csdn.net/luoyanglizi/article/d ...

  6. SpringMVC——SpringMVC 的入门案例

    1.建立web 项目,导入SpringMVC 相关支持jar 包 commons-logging-1.2.jar下载地址:https://commons.apache.org/proper/commo ...

  7. MySQL— 基础

    目录 一.MySQL概述 二.下载安装 三.数据库操作 四.数据表操作 五.表内容操作 一.MySQL概述 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracl ...

  8. freeRTOS中文实用教程3--中断管理之计数信号量

    1.前言 在中断不频繁的系统中,使用二值信号量没有问题,但是中断频繁发生时,则会有中断丢失的问题. 因为中断发生时延迟任务执行,延迟任务执行的过程中,如果又来了两次中断,则只会处理第一次,第二次将会丢 ...

  9. 经典]Linux内核中ioremap映射的透彻理解【转】

    转自:http://blog.csdn.net/lanyang123456/article/details/7403514 几乎每一种外设都是通过读写设备上的寄存器来进行的,通常包括控制寄存器.状态寄 ...

  10. Linux下查看文件或文件夹大小的命令df 、du、ls

    转自:http://www.cnblogs.com/benio/archive/2010/10/13/1849946.html 当磁盘大小超过标准时会有报警提示,这时如果掌握df和du命令是非常明智的 ...