图片上传,直接在网页中显示(支持IE,谷歌,火狐浏览器)
<!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,谷歌,火狐浏览器)的更多相关文章
- Asp.net中FileUpload控件实现图片上传并带预览显示
单一图片上传——“选择”+“上传”,.NET默认模式: 1.实现原理: 采用FileUpload控件默认的使用方式,先由“选择”按钮选择图片,然后单击“上传”按钮完成上传,并可在“上传”按钮的 ...
- 关于web项目中的图片上传、并在前端显示问题(tomcat中配置文件上传虚拟路径)
一.数据库存储 直接把图片的二进制码存到数据库,可参考blog:http://blog.csdn.net/hope2jiang/article/details/590733 直接存图片在mysql上面 ...
- 【转】关于web项目中的图片上传、并在前端显示问题(tomcat中配置文件上传虚拟路径)
一.数据库存储 直接把图片的二进制码存到数据库,可参考blog:http://blog.csdn.net/hope2jiang/article/details/590733 直接存图片在mysql上面 ...
- SpringBoot实现图片上传demo&Nginx进行代理显示
公司项目需要一个图片上传的功能,就图片能上传到服务器(公司用的windows服务器),然后nginx能进行代理访问到就行了,先简单介绍一下nginx,然后再来实现功能. 一.nginx简介 Nginx ...
- Django 图片上传到数据库 并调用显示
环境:Django2.0 Python3.6.4 建立项目,数据库设置,就不说了. 直接上代码: 在models.py中,需要建立模型,这里使用了ImageField字段,用来存储图片路径,这个字段继 ...
- 百度UEditor在线编辑器的配置和图片上传
前言 最近在项目中使用了百度UEditor富文本编辑器,配置UEditor过程中遇到了几个问题,在此记录一下解决方案和使用方法,避免以后使用UEditor出现类似的错误. 基本配置 一.下载UEdit ...
- elment ui 图片上传遇到的一些问题
图片上传返回200,message显示请上传图片 注意上图中的name字段要和服务器接受的name相同,这里我们是imgfile,默认name不是这个,所以要在el-upload组件上设置name属性 ...
- PHP实现多图片上传
PHP实现多图片上传 今天在工作中遇到了一个需求:一个表单实现多个上传图片,类似于QQ空间上传照片的模式.即:可以一次性上传多个图片,但是封面图片只有一个. 最先,最重要的事,在服务器上对文件进行读写 ...
- Html5学习笔记:图片上传
图片上传是业务需求中常见的功能,最基础的是单图片的上传.比较复杂的多图片上传,都是基于单图片上传. Form表单上传 h5的原生表单上传图片,代码如下: <!DOCTYPE html> & ...
随机推荐
- YC-Framework版本更新:V1.0.2
分布式微服务框架:YC-Framework版本更新V1.0.2!!! 版本更新,本次版本为V1.0.2 主要更新内容如下所示: 集成ActiveMQ; 集成微信生态(支持微信公众号.微信支付.微信开放 ...
- Linux中定时任务
目录 一.简介 二.crondtab file 三.crond命令的调试 四.精确到秒的任务计划 一.简介 定时任务在线测试网站 定时任务基本概念: (1).crond是一个daemon类程序,路径为 ...
- Charles ios设备抓包
在Mac下做开发,用Fiddler抓包由于离不开Windows比较痛苦,还好有Charles,到官网http://www.charlesproxy.com/可下载到最新版本(若不支持rMBP可拖到Re ...
- iterator 前++ 后++区别
for(iterator it = begin(); it != end(); ++it) 此处的 begin()<==>this->begin() 或者for(ite ...
- N1BOOK——[第五章 CTF之RE章]wp
推荐在了解了相应章节的内容后再来练习,你会觉得顿时悟了 记录一下自己的解题过程 2,3,4题目附件来源:https://book.nu1l.com/tasks/#/pages/reverse/5.4 ...
- Vue2与Vue3的组件通讯对比
Vue2 父传子 父传子比较简单, 主要通过以下步骤实现 父在template中为子绑定属性 <Child :childData='pMsg'/> <!-- 也可以写死 --> ...
- word文档打钩记录快捷键
先按住键盘上的 Alt 键不放,然后在小键盘区(数字键区)输入 9745 ,最后松开 Alt键.
- C++11 新特性:enable_shared_from_this
enable_shared_from_this是一个模板类,定义于头文件<memory>,其原型为:template< class T > class enable_share ...
- 源码-DbUtil.java
package com.tetralogy.util; import com.alibaba.druid.pool.DruidDataSourceFactory; import javax.sql.D ...
- django——django链接mysql数据库
1.创建项目 django-admin startproject django_mysql 2.创建App python manage.py startapp app1 3.Mysql数据库配置 (1 ...