火狐如何实现图片预览效果？

haha13144480 2009-09-21 02:31:23
<p class="upload"><span class="l_tag">请选择照片文件：</span>
<input name="text" id="text" value=" " class="text" type="text" style="float:left;width:180px;margin-right:5px" onblur="this.className=''" onfocus="this.className='input1'">
<span class="file">
<input id="file1" type="file" name="file1" value="up" onfocus="change(this)" />
<label id="labelpic"><span style="display:none;">格式错误</span></label>
</span>
<script type="text/javascript">
var file = document.getElementById("file1");
var text = document.getElementById("text");
var text1 = document.getElementById("text1");
file.onchange = type;
function type()
{text.value = file.value;
text1.value = file.value}
</script>
</p>
<div id="ImageDragContainer"><img src='images/setting/D.JPG' id='ImageDrag' /></div>
<div id="IconContainer"><img src='images/setting/D.JPG' id='ImageIcon'> </div>
这是美工为了美观做的样式，点击浏览的时候把file里的值显示在type="text"中了 <input name="text">
但是在FF浏览器下 input的值只是显示图片的名称，没有显示觉得路径.

function change(obj)
{
var image1=document.getElementById("ImageDrag");
var image2=document.getElementById("ImageIcon");
var file= document.getElementById("file1");
var fileType=file.value.substring(file.value.lastIndexOf('.')+1).toLowerCase();
if(fileType=='bmp' || fileType=='gif' || fileType=='jpeg' || fileType=='png' || fileType=='jpg')
{
if(window.navigator.userAgent.indexOf("MSIE")>=1){
image1.src = document.getElementById("file1").value;
image2.src = document.getElementById("file1").value;
document.getElementById("labelpic").innerText="";
}else if(window.navigator.userAgent.indexOf("Firefox")>=1){
var image = obj.files.item(0).getAsDataURL()
document.getElementById("ImageDrag").src = image ;
document.getElementById("ImageIcon").src = image ;
}
return true;
}
else
{
if(file.value!="")
{
document.getElementById("labelpic").innerText="格式错误";
}
return false;
}
}
现在在FF下遇到这种情况：第一次点击浏览的时候选择的图片在预览的位置处，并没有显示出来，而是在第二次点击浏览的时候才把第一次选择的图片显示出来，第三次点击的时候就把第二次的显示出来了，以此类推。。。

希望哪位大虾帮忙解决下 看看是不是js写的有什么问题 本人才开始学 有什么问题尽管指教吧 谢谢了
...全文
254 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
cloudgamer 2010-01-24
  • 打赏
  • 举报
 回复
可以试试这个图片预览效果
haha13144480 2009-09-21
  • 打赏
  • 举报
 回复
恩 谢谢1楼的了！！！！！！
原来是这样的 呵呵 这个页面我开始只负责裁图那一部分的 结果后来测试测试出bug就都归我管了!!
努力学习中！！
haha13144480 2009-09-21
  • 打赏
  • 举报
 回复
会不会和样式有关系呢？
.file {
width:50px;
overflow:hidden;
background:url(images/setting/jm_b4.gif);
height:22px;
这个是美工写的样式 用onchange事件没有响应。
用onblur事件有相应 每次都会把上次的图片显示 应该是一楼说的事件的问题
但是现在还没有找到怎么解决啊。。。。。。。。。。。
xinyung 2009-09-21
  • 打赏
  • 举报
 回复
因为你代码中有：
file.onchange = type; 

function type() 

{text.value = file.value; 

text1.value = file.value}

这里已经定义了onchange事件了，所以你再写也没有效果
因此我在1楼并不是故意把那些代码去掉了
haha13144480 2009-09-21
  • 打赏
  • 举报
 回复
回复一楼的：
换成onchange事件的话 就没有任何反应了。。。。
美工做的那个file的文本框没有显示出来的。
而是通过一个type="text"的input显示出来的
<input name="text" id="text" value=" " class="text" type="text" style="float:left;width:180px;margin-right:5px" onblur="this.className=''" onfocus="this.className='input1'">
<span class="file">
下面的type="file" 只是一个按钮起到file的作用 用来选择图片的 我想把onchange事件放在type="text"的input里的 但是那样就缺少this对象了。。。
<input id="file1" type="file" name="file1" value="up" onchange="change(this)" />
在网上看到好多都是用的onchange事件 我也换了下 但是在本机上就跑不起来了 没有任何的作用。。
囧 2009-09-21
  • 打赏
  • 举报
 回复
这个是我以前写的，可以参考下．
在ＩＥ 6.0 和 FF3.0 下调试通过．



<!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=gb2312" />

<title>无标题文档</title>

</head>



<body>

<script type="text/javascript">

function changeImg(file){

	var url, size;

	if(document.all){

		url = file.value;

		var oImg = new Image();

		oImg.onreadystatechange = function(){

			if(oImg.readyState == 'complete'){

				size = oImg.fileSize;

				alert(size);

			}

		};

		oImg.src = file.value;

		

	}else{

		if(file.files){

			url = file.files[0].getAsDataURL();

			size = file.files[0].fileSize;

			alert(size);

		}else{

			url = file.value;

			size = file.fileSize;

		}

	}

	document.getElementById("img1").src = url;

}

</script>

<p>上传：<input type="file" id="file1" name="file1" onchange="changeImg(this);" /></p>

<p>预览：<img src="" id="img1" alt="" /></p>

</body>

</html>
xinyung 2009-09-21
  • 打赏
  • 举报
 回复
你用的是onfocus，当然会出问题
<p class="upload"> <span class="l_tag">请选择照片文件： </span> 

<input name="text" id="text" value=" " class="text" type="text" style="float:left;width:180px;margin-right:5px" onblur="this.className=''" onfocus="this.className='input1'"> 

<span class="file"> 

<input id="file1" type="file" name="file1" value="up"  onchange="change(this)" /> 

<label id="labelpic"> <span style="display:none;">格式错误 </span> </label> 

</span>     

</p> 

<div id="ImageDragContainer"> <img src='images/setting/D.JPG' id='ImageDrag' /> </div> 

<div id="IconContainer"> <img src='images/setting/D.JPG' id='ImageIcon'> </div>

<script>

function change(obj) 

{ 

        var image1=document.getElementById("ImageDrag"); 

        var image2=document.getElementById("ImageIcon"); 

var file= document.getElementById("file1"); 

var text = document.getElementById("text"); 

text.value = file.value; 

        var fileType=file.value.substring(file.value.lastIndexOf('.')+1).toLowerCase(); 

        if(fileType=='bmp' || fileType=='gif' || fileType=='jpeg' || fileType=='png' || fileType=='jpg') 

        { 

          if(window.navigator.userAgent.indexOf("MSIE")>=1){ 

          image1.src = document.getElementById("file1").value; 

          image2.src = document.getElementById("file1").value; 

          document.getElementById("labelpic").innerText=""; 

          }else if(window.navigator.userAgent.indexOf("Firefox")>=1){ 

          var image = obj.files.item(0).getAsDataURL() 

          document.getElementById("ImageDrag").src = image ; 

    document.getElementById("ImageIcon").src = image ; 

          } 

          return true; 

        } 

        else 

        { 

          if(file.value!="") 

          { 

            document.getElementById("labelpic").innerHTML="格式错误"; 

          } 

          return false; 

        } 

}

</script>
Jsp图片预览程序（含Java源码）目前，很多网站都在为提升用户体验而努力，想尽多种办法让用户在网站上的操作更加舒适、人性化，就像这个图片预览小功能一样，不要说它很小，但是它发挥的作用很明显，在上传前预览一下图片，以免选择了错误的文件，上次写的无刷新文件上传系统最初的目的就是用来实现这个图片预览效果，程序中的JavaScript部分兼容ie6/7/8, firefox 3.5.5以及opera 10、safari 4.0.4、 chrome 3.0 等多种浏览器。
就像这个图片预览小功能一样，不要说它很小，但是它发挥的作用很明显，在上传前预览一下图片，以免选择了错误的文件，上次写的无刷新文件上传系统最初的目的就是用来实现这个图片预览效果，程序中的JavaScript部分...
基于 vue 编写的vue图片预览组件，支持单图和多图预览，仅传入一个图片地址，即可实现图片预览效果，可自定义背景、按钮颜色等
本组件是一个基于 vue 编写的vue图片预览组件，支持单图和多图预览，仅传入一个图片地址，即可实现图片预览效果，比较适合给文章及页面的所有图片添加预览效果，预览背景色，关闭按钮颜色，控制条的背景也和字体颜色...
JavaScript 图片上传预览效果(支持ie7/ie8,firefox 3.55)
但随着浏览器安全性的提高，要实现图片上传预览也越来越困难。 不过群众的智慧是无限的，网上已经有很多变通或先进的方法来实现。 例如ie7/ie8的滤镜预览法，firefox 3的getAsDataURL方法。 但在opera、safari和...
图片预览系统(asp版)
随着浏览器安全性的提高，要实现图片预览也越来越困难。 不过群众的智慧是无限的，网上也有很多变通或先进的方法来实现。 在研究了各种预览方法后，作为总结，写了这个程序，跟大家一起分享。 上次写的简便无刷新...
图片预览效果
图片上传预览是一种在图片上传之前对图片进行本地预览的技术。 使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验。...本实例通过JavaScript实现图片预览效果，代码很简单，可支持IE和火狐！
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章