js预览本地图片

最新推荐文章于 2024-05-31 15:00:13 发布
最新推荐文章于 2024-05-31 15:00:13 发布
阅读量951 收藏
点赞数
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title>get file input full path</title> 
            <script type="text/javascript">
                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) {//ie6
                                document.getElementById(imgPreviewId).setAttribute("src", obj.value);
                            } else {//ie[7-8]、ie9
                                obj.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) {//firefox
                            var 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;
                    }
                }
</script>  
     </head> 
     <body> 
  <form name="form5" id="form5"> 
<input type="file" name="file5" id="file5" οnchange="PreviewImage(this,'imgView','divNewPreview')"/> 
<img id="imgView" src=""  alt="" />
<div id="divNewPreview"></div>
</form>
     </body> 
 </html>
换个什么名字
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5+js本地图片预览
06-23
在上传图片时，经常需要预览图片。 本用例使用html5+js实现上传图片的本地预览。鼠标移至预览图片可以显示大图。
基于JavaScript实现本地图片预览
10-20
JavaScript实现本地图片预览是一项在网页中常见的功能，它允许用户在不上传图片到服务器的情况下，直接在客户端浏览器中查看选定的本地图片。这个功能在文件上传组件中非常实用，可以提高用户体验，避免了用户上传后...
【日常记录】【JS】前端预览图片的两种方式，Base64预览和blob预览
最新发布
呆呆狗
05-31 1870
【日常记录】【JS】前端预览图片的两种方式，Base64预览和blob预览
js本地图片预览
顾丽江的专栏
08-24 5343
//js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3 //js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3 function PreviewImage(fileObj,imgPreviewId,divPreviewId){
JavaScript实现本地图片预览
~~welcome to fuhao`s blog on javaeye~~
08-03 195
//============================== //功能:Javascript本地图片预览 //Author:yaosansi //Site:http://www.yaosansi.com //Date:2006-02-21 //说明:简单的判断了文件的合法性 //适用于:上传文件前预览本地图片 //=======================...
JavaScript本地预览图片功能
时代挥豪的博客
04-20 599
JavaScript本地预览图片功能
纯JS实现本地图片预览的方法
10-23
总之，纯JavaScript实现本地图片预览是一个高效、兼容性好的技术方案，它不仅提高了用户的交互体验，还能满足多种复杂的业务需求。随着前端技术的发展和浏览器能力的增强，这种方法将会有更广泛的应用前景。
javascript IE7 浏览器本地图片预览
10-30
在JavaScript中处理浏览器的本地图片预览功能时，尤其是在旧版的Internet Explorer（如IE7）中，开发者会遇到一些挑战。在IE6中，我们可以简单地通过改变`img`标签的`src`属性来实现本地图片预览，但IE7并不支持这种...
jQuery实现本地预览上传图片功能
10-23
在本文中，我们将深入探讨如何使用jQuery来实现本地预览上传图片的功能，这对于网页上的图像交互体验至关重要。jQuery是一款广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果和Ajax交互。在这个功能中...
JavaScript实现预览本地上传图片功能完整示例
10-17
JavaScript实现预览本地上传图片功能是一个常见的前端技术实现，它涉及到文件输入、正则表达式、浏览器兼容性处理以及DOM操作等多个知识点。本文将详细介绍如何使用JavaScript来实现一个在用户选择图片后能够立即在...
本地JS_Html文件实现调用设备相册源文件
04-09
本地JS_Html文件实现调用设备相册源文件，实现cordova调用iPhone设备
js实现图片的本地预览
hql007的博客
05-16 5555
    最近在学习JS的过程中，写了一个图片本地预览的小demo，遇到了浏览器处于安全设置，限制了获取文件在本地的绝对路径问题，已通过查找资料解决，现记录下来备忘。    实现图片的预览，两步即可完成。首先，使用&lt;input type="file" /&gt;来让用户选择图片；然后，通过JS获取文件路径，将之放入到&lt;img&gt;标签的src属性中。&lt;h2&gt;图片预览&lt;...
js本地预览图片
weixin_30273501的博客
03-02 81
废话不说 直接上代码 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><html><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><...
前端实现input[type='file']上传图片预览效果
weixin_30633405的博客
11-07 239
众所周知JavaScript在设计上处于安全角度考虑，是不允许读写本地文件的（原因请自行百度）； 但是在实际项目应用中，经常会使用到上传图片，并且可以让用户直接预览图片。对于此种做法有两种方法可以实现：一是前后台交互，后台将图片地址返回前端； 二是，我今天写的内容，使用FileReader对象——允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容；此种方法可以优化图片...
本地图片展示
dongheng123的博客
08-31 228
blob:http://localhost:8080/e91d7c79-a12e-41d4-a3b5-7250dcafc7e7 此链接就是本地展示图片看到的链接 1.URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。 2.通过FileReader.readAsDataURL(file)可以获取一段da
页面展示本地图片
崔崇东的博客
01-11 951
页面展示本地图片(tomcat服务器) 1.server.xml里面配上你本地 图片的路径 debug="0" docBase="D:\image" path="/image" reloadable="true"/> 2.这是我本地的图片 3.这是页面代码 img src="/image/001.jpg"/>
javaScript 产生本地图片预览
yw404109794的博客
09-24 121
[code="js"] //此为不按比例显示在固定区域内（td div img 标签中都OK 支持IE6以上版本）显示， 如： 调用方法：onfocus= "javascript:ShowImage(this.value,document.getElementById('img'))" //============================== //功能:Jav...
jquery实现上传图片本地预览效果
行走的IT
03-21 3170
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script><input id="upload" type="file"> <img id="preview" src=""> <script type="text/javascript"> $('#upload').change(fu
JavaScript图片上传预览技术解析与实现
本文主要讨论了如何使用JavaScript实现图片上传预览效果，这是一种提升用户体验的功能，让用户在上传图片前能在本地预览所选图片。由于不同浏览器的安全策略，实现这一功能存在一定的挑战。作者在研究了多种预览方法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值