图片预览(适用于IE6,9,10，Firefox)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>js实现浏览图片预览</title><style type="text/css">body {}a, img {border: 0;}.button {background-color: #0075AC;border-radius: 20px;color: #FFF;font-family: "微软雅黑";font-size: 14px;height: 30px;line-height: 30px;padding: 0 15px;display: inline-block;text-decoration: none;}.file {width: 0px;height: 0px;overflow: hidden;position:absolute;left:-100px;top:-100px;z-index:-999;}#filelist {min-height: 30px;height: auto;/*border: 1px solid #c9c9c9;*/margin: 5px 0;}#filelist img {margin: 5px 0 5px 5px;}</style><script type="text/javascript">//预览图片function previewImage(file) {//标准浏览器,FF、谷歌if (file["files"] && file["files"][0]) {var reader = new FileReader();reader.onload = function (evt) {document.getElementById('img1').src = evt.target.result;}reader.readAsDataURL(file.files[0]);}//IEelse {file.select();var path = document.selection.createRange().text;document.getElementById('img1').src = path;}}//选择图片function selectImage() {document.getElementById('file1').click();}//开始上传,这个只适用于我们.NET,上传你暂时用不了function startUpload() {var _file1 = document.getElementById("file1");var _url = "_upload.aspx";var formData = new FormData();formData.append("file", _file1.files[0]);var _request = new XMLHttpRequest();_request.open("post", _url, true);_request.onload = function (response) {var name = response.currentTarget.responseText;alert(name);//返回上传文件名,失败返回空}_request.send(formData);}</script>
</head>
<body><input id="file1" type="file" οnchange="previewImage(this)" class="file" /><a href="javascript:selectImage()" class="button">选择图片</a><a href="javascript:startUpload()" class="button">上传文件</a><div id="filelist"><img src="" width="100" height="70" id="img1" alt="" /></div>
</body>
</html>

以上个人验证过，可用！

转载于:https://www.cnblogs.com/wcyBlog/p/4030174.html

图片预览(适用于IE6,9,10，Firefox)相关推荐

html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器
原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器以前写过上传组件,见打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一 ...
适用于各浏览器支持图片预览，无刷新异步批量上传js插件(2)
之前写的这个上传插件,同事们都觉得还不错,不过都觉得还不够完美,于是决定使用业余时间对此插件持续优化,可能你过段时间会发现,插件又增加了新功能什么的,请注意文章后面评论里的更新说明. 以前在上传的时候 ...
input file本地图片预览的方法（兼容IE、Chrome和Firefox）
JS兼容各个浏览器的本地图片上传即时预览效果 2014-02-26 我来说两句收藏我要投稿很早以前在杭州银行工作曾经碰到这么一个需求,当时也是纠结了很久,也是go ...
Javascript 本地图片预览
IE 的本地图片预览,使用 "file://localhost/"+file.value 的形式实现.或者使用图片滤镜来实现: Chrome 和 FireFox 浏览器,使用 ...
dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库....
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
//js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 <!DOCTYPE html> <html xmlns="http: ...
js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3tr td style=width:35%; class=noBorderL
<tr> <td style="width:35%;" class="noBorderL firstTD">资格证图片</td&g ...
Vue 组件库 heyui@1.18.0 发布，新增地址选择、图片预览组件
开发四年只会写业务代码,分布式高并发都不会还做程序员? 新增 CategoryPicker 新增组件 CategoryPicker,地址级联组件的最佳方案. <CategoryPicker ...
php 图片预览原理,JavaScript_纯JS实现的批量图片预览加载功能，1.实现原理直接见代码,需要一 - phpStudy...
纯JS实现的批量图片预览加载功能 1.实现原理直接见代码,需要一张转圈的小图片,需要预览的所有图片默认的位置全是这张小图片,滚轮滚到原图需要出现的位置时候,预览加载替换小图片.实现效果复制代码代码 ...

图片预览(适用于IE6,9,10，Firefox)

图片预览(适用于IE6,9,10，Firefox)相关推荐

最新文章

热门文章