<!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. 个人项目作业-Word Count

    个人项目作业 1.Github地址 https://github.com/CLSgGhost/SE_work 2.项目相关需求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数. ...

  2. js滑动到页面底部实现

    js实现 1.window.scrollTo(0,document.documentElement.clientHeight);  //js jq实现 2 .var windowHeight = pa ...

  3. .NET 内存泄漏的争议

    前几天发布了几篇关于要小心使用 Task.Run 的文章,看了博客园的所有评论.发现有不少人在纠结示例中的现象是不是属于内存泄漏,本文分享一下我个人的看法,大家可以保留自己的意见. 在阅读本文前,如果 ...

  4. Java并发编程的艺术（六）——中断、安全停止线程

    什么是中断 Java的一种机制,用于一个线程去暂停另一个线程的运行.就是一个正在运行的线程被其他线程给打断,停止运行挂起了. 我觉得,在Java中,这种中断机制只是一种方便程序员编写进程间的通信罢了. ...

  5. JQuery ajax request及Java服务端乱码问题及设置

    今天花了半天功夫才搞定2个乱码问题 1. 原先一直用form提交,现在改作JQuery ajax 提交,发现乱码. 2. window.location url中含有中文提交后,乱码. 第一个问题: ...

  6. Web服务器-并发服务器-协程 （3.4.2）

    @ 目录 1.分析 2.代码 关于作者 1.分析 随着网站的用户量越来愈多,通过多进程多线程的会力不从心 使用协程可以缓解这一问题 只要使用gevent实现 2.代码 from socket impo ...

  7. Android 7.0应用之间共享文件

    原文首发于微信公众号:躬行之,欢迎关注交流! 开发中经常需要将某个文件向另一个应用程序传递,如图片上传到另一个应用程序.文件在不同存储路径之间的复制粘贴等都需要共享文件,可以这样理解接收文件的应用是在 ...

  8. git原理学习记录：从基本指令到背后原理，实现一个简单的git

    一开始我还担心 git 的原理会不会很难懂,但在阅读了官方文档后我发现其实并不难懂,似乎可以动手实现一个简单的 git,于是就有了下面这篇学习记录. 本文的叙述思路参照了官方文档Book的原理介绍部分 ...

  9. 在vue 中 element-ui table结合Popover使用

    在vue 中 element-ui table结合Popover使用 <el-table-column label="操作" > <template slot-s ...

  10. 本地TOMCAT启动打包项目（WAR）

    首先打个包,右击项目-->Export...   选择WEB-->WAR file-->Next   选个放置地址,勾选红框处-->finish   找到自己的tomcat目录 ...