js代码实现：

从file域获取本地图片url并将本地图片显示到浏览器上。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">

/**

* 从 file 域获取 本地图片 url

* 编辑：www.jbxue.com

*/

function getFileUrl(sourceId) {

var url;

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

url = document.getElementById(sourceId).value;

} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox

url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));

} else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome

url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));

}

return url;

}

/**

* 将本地图片 显示到浏览器上

* 编辑：www.jbxue.com

*/

function preImg(sourceId, targetId) {

var url = getFileUrl(sourceId);

var imgPre = document.getElementById(targetId);

imgPre.src = url;

}

</script>

</head>

<body>

<form action="">

<input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" />

<img id="imgPre" src="" width="300px" height="300px" style="display: block;" />

</form>

</body>

</html>

JS预览图像将本地图片显示到浏览器上的代码的更多相关文章

  1. JS预览图像将本地图片显示到浏览器上

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  2. JS预览图像

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  3. 图片预览(base64和blob:图片链接)和ajax上传、下载(带进度提示)

    直接上代码 html和js <!DOCTYPE html> <html> <head> <meta name="viewport" con ...

  4. 图片上传，支持同步/异步、预览（MVC、uploadify异步提交、js预览、ajaxSubmit异步提交）兼容大部分浏览器，含代码

    图片上传代码,支持同步/异步和图片的预览 主要用了两种方式,可兼容大部分浏览器. 第一种使用uploadify异步上传,上传后返回图片路径显示到页面. 每二种使用ajaxSubmit异步上传,为兼容I ...

  5. 前端使用pdf.js预览pdf文件

    现在的浏览器基本都支持直接把pdf文件拖到浏览器就可以打开了,不用安装额外的插件.但是不同的浏览器显示的页面不一样.如果我们想在网页上统一预览pdf怎样实现呢? Mozilla开源了一个插件pdf.j ...

  6. 如何使用JavaScript直接上传并预览粘贴板的图片？

    (题图:梵高-橄榄树) 提出需求 因为工作原因,现在有一个需求就是需要用户使用QQ或者微信复制一张截图后,在div中直接粘贴这张图片,而不是采用上传的方式.类似我们在使用QQ微信时直接粘贴截图的操作, ...

  7. 前端使用pdf.js预览pdf文件,超级简单

    现在的浏览器基本都支持直接把pdf文件拖到浏览器就可以打开了,不用安装额外的插件.但是不同的浏览器显示的页面不一样.如果我们想在网页上统一预览pdf怎样实现呢? Mozilla开源了一个插件pdf.j ...

  8. Android Camera 预览图像被拉伸变形的解决方法【转】

    问题描述: 预览图像被拉伸变形 问题原因: 由于预览图像大小跟SurfaceView 大小不一致引起 解决方法: 获取系统支持的所有预览尺寸[getSupportedPictureSizes],然后再 ...

  9. 获取unity prefab的预览图像

    官方的api可以直接获取预览图像,如下所示: Tex=AssetPreview.GetAssetPreview(Object m)as Texture; 但是如果prefab是组合体的话(即一个pre ...

随机推荐

  1. B. Om Nom and Dark Park

    B. Om Nom and Dark Park 在满二叉树上的某些边上添加一些值.使得根节点到叶子节点的路径上的权值和都相等.求最少需要添加多少. 我们利用性质解题.   考察兄弟节点.由于他们从跟节 ...

  2. How to setup ELM327 Bluetooth WiFi for Android software Torque

    1.    Install OBDII 2.    Install Android Software Torque a)    Copy software to phone from CD b)   ...

  3. 《算法导论》习题解答 Chapter 22.1-4（去除重边）

    思路:重开一个新图,按着邻接列表的顺序从上到下遍历,每遍历一行链表前,清空visited数组,如果没有访问过这个元素,则加入新图,如果已经访问过了(重边),则不动. 伪代码: 复杂度:O(V+E) f ...

  4. JVM 运行时内存结构

      1.JVM内存模型       JVM运行时内存=共享内存区+线程内存区 1).共享内存区       共享内存区=持久带+堆       持久带=方法区+其他       堆=Old Space ...

  5. ionic默认样式android和ios的一些不同（当时真是纠结啊~）

    当时测试的时候看到android和ios上有那么大差别,特别崩溃啊... 还好看到了这篇文章,文章原文是Ionicchina中文网上的:http://ionichina.com/topic/54e45 ...

  6. Kinect For Windows V2开发日志四：使用OpenCV显示深度图像

    代码示例: #include <Kinect.h> #include <iostream> #include <opencv2\highgui.hpp> using ...

  7. 转： android apk 防止反编译技术（1~5连载）

    转: android apk 防止反编译技术 做android framework方面的工作将近三年的时间了,现在公司让做一下android apk安全方面的研究,于是最近就在网上找大量的资料来学习. ...

  8. Jquery事件委托之Safari

    什么是事件委托 事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数. //常见的事件绑定(Jquery) ...

  9. 一.CSS工作原理

    CSS全称层叠样式表,它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.是能够真正做到网页表现与内容分离的一种样式设计语言,能够对网页 ...

  10. android app性能优化大汇总（google官方Android性能优化典范 - 第1季）

    大多数用户感知到的卡顿等性能问题的最主要根源都是因为渲染性能.从设计师的角度,他们希望App能够有更多的动画,图片等时尚元素来实现流畅的用户体验.但是Android系统很有可能无法及时完成那些复杂的界 ...