<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>3</title>

<script>

function getFullPath(obj) {

    if (obj) {

        //Internet Explorer

        if (window.navigator.userAgent.indexOf("MSIE") >= 1) {

            obj.select();

            return document.selection.createRange().text;

        }

        //Firefox

        if (window.navigator.userAgent.indexOf("Firefox") >= 1) {

            if (obj.files) {

                return obj.files.item(0).getAsDataURL();

            }

            return obj.value;

        }   

        //兼容chrome、火狐等，HTML5获取路径

        if (typeof FileReader != "undefined") {

            var reader = new FileReader();

            reader.onload = function(e) {

                document.getElementById("pic").src = e.target.result + "";

            }

            reader.readAsDataURL(obj.files[0]);

        } else if (browserVersion.indexOf("SAFARI") > -1) {

            alert("暂时不支持Safari浏览器!");

        }  

    }

}  

function showPic(obj) {

    var fullPath = getFullPath(obj);

    if (fullPath) {

        document.getElementById("pic").src = fullPath + "";

    }

}

</script>

</head>

<body>

    <input type="file" onchange="showPic(this)">

    <img src="" id="pic">

</body>

</html>

由于工作需要，自己写了个小demo，通过自己组装，可以实现一定的需求。

原创文章如转载，请注明出处

一个上传图片，预览图片的小demo的更多相关文章

  1. KindEditor的简单使用，以及上传图片预览图片，用户删除图片后的数据处理（重点），以及 BeautifulSoup，shutil两模块了解

    KindEditor的简单了解 http://www.cnblogs.com/wupeiqi/articles/6307554.html 简单使用: <div class="comm& ...

  2. ipad iphone 开发的应用，加一个启动预览图片

    如果你想在你的ipad,iphone应用启动是不显示黑屏幕,而是用一个图片代替的话,你只需要吧一张名为 Default.png 的图片加到项目里就行了. 很简单吧,新手们记得去这样美化下你的应用吗,很 ...

  3. 通过HTML5 FileReader实现上传图片预览功能

    原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...

  4. 微信小程序预览图片

    选择图片时可设置图片是否是原图,图片来源.这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用 主要方法: wx.chooseImage(object) wxml ...

  5. 【微信小程序】微信小程序wx.previewImage预览图片

    一.小知识 二.例子,配合轮播图使用效果更佳!(如图1) 1.wxml <scroll-view scroll-y="true"> <swiper catchta ...

  6. 微信小程序：点击预览图片

    在开发微信小程序时,开发人员会参考着小程序api来开发小程序,但有的时候根据情况不同很容易出现bug,以下是我在开发小程序时出现的各种bug,在开发时有需要预览图片. 1.xml <view c ...

  7. file上传图片，base64转换、压缩图片、预览图片、将图片旋转到正确的角度

    /** * 将base64转换为文件对象 * (即用文件上传输入框上传文件得到的对象) * @param {String} base64 base64字符串 */ function convertBa ...

  8. input file 模拟预览图片。

    首先申明,接下来内容只是单纯的预览图片,最多选择九张,并没有和后台交互,交互的话需要自己另外写js. 本来想写一个调用摄像头的demo,意外的发现input file 在手机端打开的话,ios可以调用 ...

  9. 异步上传&预览图片-压缩图片

    移动端普及的时代,流量是用户最关心的,手机拍出来的照片基本上都在1~2M以上,这样上传会非常耗流量,影响用户体验,此例能在保证清晰度的情况下,将4.5M的图片压缩为30K <!DOCTYPE h ...

随机推荐

  1. golang omitempty 总结

    golang omitempty 总结 在使用Golang的时候,不免会使用Json和结构体的相互转换,这时候常用的就是 json.Marshal和json.Unmarshal两个函数. 这时候在定义 ...

  2. SseEmitter推送

    后端代码SseController.java package com.theorydance.mywebsocket.server; import java.util.HashMap; import ...

  3. utc时间转换为太平洋时间

    方法一 from datetime import datetime from pytz import timezone cst_tz = timezone('Asia/Shanghai') utc_t ...

  4. 基于Python3.7 Robot Framework自动化框架搭建

    一.Robot Framework 和 Selenium 的区别(面试常问) 主流自动化测试框架有Robot Framework 和 Selenium,请根据实际场景选用不同的框架,以下总结各自优缺点 ...

  5. redis 存储验证码 基本使用

    1 redis 存储验证码 基本使用 1.1 setting 配置 CACHES = { "default": { "BACKEND": "djang ...

  6. Spring MVC或Spring Boot配置默认访问页面不生效？

    相信在开发项目过程中,设置默认访问页面应该都用过.但是有时候设置了却不起作用.你知道是什么原因吗?今天就来说说我遇到的问题. 首先说说配置默认访问页面有哪几种方式. 1.tomcat配置默认访问页面 ...

  7. java集合源码分析（六）：HashMap

    概述 HashMap 是 Map 接口下一个线程不安全的,基于哈希表的实现类.由于他解决哈希冲突的方式是分离链表法,也就是拉链法,因此他的数据结构是数组+链表,在 JDK8 以后,当哈希冲突严重时,H ...

  8. Spring MVC例子

    学习Spring MVC的一个例子,参考书籍<Servlet.JSP.Spring MVC学习指南>,简单总结一下. 代码下载:https://github.com/PeiranZhang ...

  9. ssl证书---验证域名数量分类

    单域名SSL证书   : 单一域名 多域名SSL证书   : 多个域名 通配符SSL证书   : 通配符域名

  10. Mac电脑完美解决 BasicIPv6ValidationError 问题，通过命令行更改ip设置

    在更改mac电脑ip网络时,提示BasicIPv6ValidationError.