<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<script>
function setImagePreview() {
var docObj = document.getElementById("doc");
var imgObjPreview = document.getElementById("preview");
if (docObj.files && docObj.files[0]) {
/*火狐下，直接设img属性*/
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '150px';
imgObjPreview.style.height = '120px';
/*imgObjPreview.src = docObj.files[0].getAsDataURL();*/
/*火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式*/
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
} else {
/*IE下，使用滤镜*/
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
/*必须设置初始大小*/
localImagId.style.width = "150px";
localImagId.style.height = "120px";
/*图片异常的捕捉，防止用户修改后缀来伪造图片*/
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
} catch (e) {
alert("您上传的图片格式不正确，请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
</script>
<input type=file name="doc" id="doc" onchange="javascript:setImagePreview();">
<p>
<div id="localImag">
<img id="preview" width=-1 height=-1 style="diplay: none" />
</div> 
</p> 
</body>
</html>

图片上传，直接在网页中显示(支持IE，谷歌，火狐浏览器)的更多相关文章

  1. Asp.net中FileUpload控件实现图片上传并带预览显示

    单一图片上传——“选择”+“上传”,.NET默认模式: 1.实现原理:     采用FileUpload控件默认的使用方式,先由“选择”按钮选择图片,然后单击“上传”按钮完成上传,并可在“上传”按钮的 ...

  2. 关于web项目中的图片上传、并在前端显示问题(tomcat中配置文件上传虚拟路径)

    一.数据库存储 直接把图片的二进制码存到数据库,可参考blog:http://blog.csdn.net/hope2jiang/article/details/590733 直接存图片在mysql上面 ...

  3. 【转】关于web项目中的图片上传、并在前端显示问题(tomcat中配置文件上传虚拟路径)

    一.数据库存储 直接把图片的二进制码存到数据库,可参考blog:http://blog.csdn.net/hope2jiang/article/details/590733 直接存图片在mysql上面 ...

  4. SpringBoot实现图片上传demo&Nginx进行代理显示

    公司项目需要一个图片上传的功能,就图片能上传到服务器(公司用的windows服务器),然后nginx能进行代理访问到就行了,先简单介绍一下nginx,然后再来实现功能. 一.nginx简介 Nginx ...

  5. Django 图片上传到数据库 并调用显示

    环境:Django2.0 Python3.6.4 建立项目,数据库设置,就不说了. 直接上代码: 在models.py中,需要建立模型,这里使用了ImageField字段,用来存储图片路径,这个字段继 ...

  6. 百度UEditor在线编辑器的配置和图片上传

    前言 最近在项目中使用了百度UEditor富文本编辑器,配置UEditor过程中遇到了几个问题,在此记录一下解决方案和使用方法,避免以后使用UEditor出现类似的错误. 基本配置 一.下载UEdit ...

  7. elment ui 图片上传遇到的一些问题

    图片上传返回200,message显示请上传图片 注意上图中的name字段要和服务器接受的name相同,这里我们是imgfile,默认name不是这个,所以要在el-upload组件上设置name属性 ...

  8. PHP实现多图片上传

    PHP实现多图片上传 今天在工作中遇到了一个需求:一个表单实现多个上传图片,类似于QQ空间上传照片的模式.即:可以一次性上传多个图片,但是封面图片只有一个. 最先,最重要的事,在服务器上对文件进行读写 ...

  9. Html5学习笔记：图片上传

    图片上传是业务需求中常见的功能,最基础的是单图片的上传.比较复杂的多图片上传,都是基于单图片上传. Form表单上传 h5的原生表单上传图片,代码如下: <!DOCTYPE html> & ...

随机推荐

  1. 【MySQL】查询不在表中的数据

    1.方法一(仅适用单个字段):使用 not in ,比较容易理解,缺点是效率低 如:select A.ID from A where A.ID not in (select ID from B): 2 ...

  2. 【CentOS】检查系统是否安装OpenSSH

    CentOS7 远程联机 哔哩哔哩 萌狼蓝天 博客:https://mllt.cc 微信公众号:萌狼蓝天 检查与安装配置OpenSSH [CentOS7]检查系统是否安装OpenSSH yum -q ...

  3. C语言实现鼠标绘图

    使用C语言+EGE图形库(Easy Graphics Engine).思路是通过不断绘制直线来实现鼠标绘图的功能,前一个时刻鼠标的坐标作为直线的起点,现在时刻的坐标作为终点(严格意义是线段而不是直线) ...

  4. 【模型推理】量化实现分享二：详解 KL 对称量化算法实现

      欢迎关注我的公众号 [极智视界],回复001获取Google编程规范   O_o   >_<   o_O   O_o   ~_~   o_O   大家好,我是极智视界,本文剖析一下 K ...

  5. 第四届“传智杯”全国大学生IT技能大赛题解

    目录 A B C D E F G 今年题目难度普遍偏低.只有 D,F 还好. A 按题目给的公式计算即可.注意应在最后的答案中去掉小数部分. B 按照题意模拟即可.注意答案要与 \(0\) 取 \(\ ...

  6. java 多线程 线程池：多核CPU利用ExecutorService newWorkStealingPool； ForkJoinPool线程池 执行可拆分的任务RecursiveAction；RecursiveTask

    1,给定并行级别: 1,ExecutorService newWorkStealingPool(int parallelism): 创建持有足够的线程的线程池来支持给定的并行级别,该方法还会使用多个队 ...

  7. IO复用的三种方法（select,poll,epoll）深入理解

    (一)IO复用是Linux中的IO模型之一,IO复用就是进程告诉内核需要监视的IO条件,使得内核一旦发现进程指定的一个或多个IO条件就绪,就通过进程处理,从而不会在单个IO上阻塞了,Linux中,提供 ...

  8. Mysql中不能update自身的解决方法

    不能执行:update bi_data.order_all_detailset err_msg='同时存在于wx,zfb平台',proc_time=now()where order_no in( se ...

  9. FilesCodingConvert--批量文件编码格式转换工具

    FilesCodingConvert–批量文件编码格式转换工具 简介 最近开始学习使用Android Studio,因为它的方便易用,我打算以后就不在使用ADT的方式编写Android项目了.当从Ec ...

  10. 【LeetCode】1014. Capacity To Ship Packages Within D Days 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...