首页 > 代码库 > 图片预览(适用于IE6,9,10，Firefox)
图片预览(适用于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 = http://www.mamicode.com/evt.target.result;"file1"); var _url = "_upload.aspx"; var formData = http://www.mamicode.com/new FormData();"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" onchange="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" /> </div></body></html>以上个人验证过，可用！
图片预览(适用于IE6,9,10，Firefox)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。