<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<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 = '300px';
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 = "250px";
localImagId.style.height = "200px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
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>
</head>

<body>
<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>

来自：http://www.ablanxue.com/prone_4029_1.html

Java带图片预览功能的图片上传兼容火狐ie的更多相关文章

  1. H5图片预览、压缩、上传

    目标实现: 1.选择图片, 前端预览效果 2.图片大于1.2M的时候, 对图片进行压缩 3.以表单的形式上传图片 4.图片删除 预览效果图: 代码说明: 1.input:file选择图片 <!- ...

  2. h5 js 图片预览并判断 ajax上传

    //建立一個可存取到該file的url function getObjectURL(file) { var url = null; if (window.createObjectURL != unde ...

  3. js实现图片预览、压缩、上传

    先看几个对象:Blob.ArrayBuffer.File.fileReader.formData 详细解释请参考:https://www.cnblogs.com/youhong/p/10875190. ...

  4. 如何通过js实现图片预览功能

    一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  5. 原生JS实现图片预览功能

    html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...

  6. HTML5实现图片预览功能

    两种方式实现 URL FileReader Index.jsp文件 <%@page contentType="text/html" pageEncoding="UT ...

  7. 原生js实现ajax的文件异步提交功能、图片预览功能.实例

    采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...

  8. H5图片预览功能

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  9. html页面选择图片上传时实现图片预览功能

    实现效果如下图所示 只需要将下面的html部分的代码放入你的代码即可 (注意引入jQuery文件和html头部的css样式,使用的是ajax提交) <!-- 需引入jQuery 引入样式文件 引 ...

随机推荐

  1. UI5-文档-4.37-Content Density

    在本演练教程的这一步中,我们将根据用户的设备调整内容密度.SAPUI5包含不同的内容密度,允许您为支持触摸的设备显示更大的控件,为鼠标操作的设备显示更小.更紧凑的设计.在我们的app中,我们将检测设备 ...

  2. Window python下载安装

    Window python下载安装 http://www.runoob.com/python/python-install.html https://pan.baidu.com/s/1MoR9nWUY ...

  3. Mybatis知识(2)

    1.#{}和${}的区别是什么? 注:这道题是面试官面试我同事的. 答:${}是Properties文件中的变量占位符,它可以用于标签属性值和sql内部,属于静态文本替换,比如${driver}会被静 ...

  4. box2d 易错

    1.动态刚体与一个与静态刚体重叠的小的感应刚体在contactBegin时,有些时候无法侦测到 2.bodyA.GetContactList()应用非动态刚体,会找不到另一非动态刚体的接触,非动态刚体 ...

  5. 在windows 2008 R2中SQl Server 2008中代理启动失败的一个原因总结

    启动SQL代理的时候报错如下: 关调用实时(JIT)调试而不是此对话框的详细信息,请参见此消息的结尾. ************** 异常文本 **************System.NullRef ...

  6. js json转对象

    使用eval() 读取 for (var i=0;i< response.length; i++) { //alert(response[i].username) html=html+" ...

  7. [Fiddler] The connection to 'xxxxx.com' failed. <br />System.Security.SecurityException Failed to negotiate HTTPS connection with server.fiddler.network.https&gt; HTTPS handshake to intelte

    最近利用模拟发get请求的时候出现: [Fiddler] The connection to ‘xxxxx.com' failed. <br />System.Security.Secur ...

  8. 亲, 我们来再重申一遍"=="和"equals的区别

    今天经历的一个事情太丢脸了, 一个学弟向我请教问题, 是这样的: 一个字符串里面含有空格, 不允许使用.trim()和replace方法, 只用if和for将空格去掉, 题目很简单, 一开始我是这样写 ...

  9. acceleration

    acceleration - Bing dictionary US[ək.selə'reɪʃ(ə)n]UK[ək.selə'reɪʃ(ə)n] n.加速度:加快:(车辆)加速能力 网络促进:加速力:加 ...

  10. C# 发送电子邮件（含附件）用到的类 system.web.mail

    主要是用到了System.Web.Mail命名空间,用到了此空间的三个类,分别是: ●MailMessage类,用于构造电子邮件●MailAttachment类,用于构造电子邮件附件●SmtpMail ...