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

Question

<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写的有什么问题 本人才开始学 有什么问题尽管指教吧 谢谢了

Answer 1

你用的是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>

Answer 2

这个是我以前写的，可以参考下．
在ＩＥ 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>

Answer 3

回复一楼的：
换成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事件 我也换了下 但是在本机上就跑不起来了 没有任何的作用。。

Answer 4

因为你代码中有：
file.onchange = type; 
function type() 
{text.value = file.value; 
text1.value = file.value} 
这里已经定义了onchange事件了，所以你再写也没有效果
因此我在1楼并不是故意把那些代码去掉了

Answer 5

会不会和样式有关系呢？
.file {
width:50px;
overflow:hidden;
background:url(images/setting/jm_b4.gif);
height:22px;
这个是美工写的样式 用onchange事件没有响应。
用onblur事件有相应 每次都会把上次的图片显示 应该是一楼说的事件的问题
但是现在还没有找到怎么解决啊。。

Answer 6

恩 谢谢1楼的了！！！！！！
原来是这样的 呵呵 这个页面我开始只负责裁图那一部分的 结果后来测试测试出bug就都归我管了!!
努力学习中！！