js(头像,图片)上传,如何立即展示?图片详解。
来源:互联网 发布:100本网络禁书打包下载 编辑:程序博客网 时间:2024/04/26 00:27
我个人觉得,这个js(头像,图片)上传,立即展示,对做web前端的童鞋来说,还是非常有用的。
主要的js previewImage.js:
function PreviewImage(obj, imgPreviewId, divPreviewId) {var allowExtention = ".jpg,.bmp,.gif,.png"; //,允许上传文件的后缀名var extention = obj.value.substring(obj.value.lastIndexOf(".") + 1).toLowerCase();var browserVersion = window.navigator.userAgent.toUpperCase();if (allowExtention.indexOf(extention) > -1) {if (browserVersion.indexOf("MSIE") > -1) {if (browserVersion.indexOf("MSIE 6.0") > -1) {//ie6document.getElementById(imgPreviewId).setAttribute("src", obj.value);} else {//ie[7-8]、ie9obj.select();var newPreview = document.getElementById(divPreviewId + "New");if (newPreview == null) {newPreview = document.createElement("div");newPreview.setAttribute("id", divPreviewId + "New");newPreview.style.width = 160;newPreview.style.height = 170;newPreview.style.border = "solid 1px #d2e2e2";}newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";var tempDivPreview = document.getElementById(divPreviewId);tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview);tempDivPreview.style.display = "none";}} else if (browserVersion.indexOf("FIREFOX") > -1) {//firefoxvar firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);if (firefoxVersion < 7) {//firefox7以下版本document.getElementById(imgPreviewId).setAttribute("src", obj.files[0].getAsDataURL());} else {//firefox7.0+ document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(obj.files[0]));}} else if (obj.files) {//兼容chrome、火狐等,HTML5获取路径 if (typeof FileReader !== "undefined") {var reader = new FileReader();reader.onload = function (e) {document.getElementById(imgPreviewId).setAttribute("src", e.target.result);}reader.readAsDataURL(obj.files[0]);} else if (browserVersion.indexOf("SAFARI") > -1) {alert("暂时不支持Safari浏览器!");}} else {document.getElementById(divPreviewId).setAttribute("src", obj.value);}} else {alert("仅支持" + allowSuffix + "为后缀名的文件!");obj.value = ""; //清空选中文件if (browserVersion.indexOf("MSIE") > -1) {obj.select();document.selection.clear();}obj.outerHTML = obj.outerHTML;}}html部分:
<div class="news_img"><label for="newCover" class="ncLabel">配图:</label><img id="imgView" src="" alt="" /> <input type="file" name="file1" class="file" value='浏览...' onchange="PreviewImage(this,'imgView','pic_preview')" /></div>
示例图:
基本就是这样的了。
1 0
- js(头像,图片)上传,如何立即展示?图片详解。
- js头像(图片)上传,立即展示!——李帅醒博客
- Django 图片 头像 文件 上传 展示
- js实现上传图片立即回显
- js 头像上传(图片截取) 插件 全屏高清版 源码
- 上传图片立即显示
- 上传图片 头像
- 上传图片,头像
- 上传图片后立即显示
- ASP.NET立即上传图片
- springmvc+tomcat图片上传后如何立即刷新出来
- 七牛上传base64图片(附js裁剪头像,上传七牛)
- 选择相册上传图片 展示图片(仿微信选择图片)
- SpringMVC 上传图片和头像
- JS 选择图片后立即显示图片
- Android上传头像,图片剪裁,压缩图片
- Android上传头像,图片剪裁,压缩图片
- Android上传头像,图片剪裁,压缩图片
- 学而不思则罔
- oracle 安装错误码
- IO完成端口
- 微软 Build 2016年开发者大会发布多项功能升级
- 代码篇——Datagrid客户端假分页的代码
- js(头像,图片)上传,如何立即展示?图片详解。
- 如何用maya 渲染论文彩图 (occulusion效果)
- 基本数据类型:8种基本类型、对应的包装类、引用数据类型及与String 之间的转换。
- lightoj 1169 - Monkeys on Twin Tower 简单DP
- JSP程序设计:Servlet配置问题
- 买衣服
- HDU 1087 Super Jumping! Jumping! Jumping!
- vmware unlock 无法成功 LookupError: unknown encoding: cp65001
- 大锅乱炖10大H5前端框架