当前位置: 代码迷 >> Java Web开发 >> 为何图片一定要放到HEAD中,才能正确显示?
  详细解决方案

为何图片一定要放到HEAD中,才能正确显示?

热度:75   发布时间:2016-04-17 14:19:58.0
为什么图片一定要放到HEAD中,才能正确显示???
<HTML>  
<HEAD>  
<TITLE> </TITLE>  
<img   src= "about:blank "   id= "fileChecker "   alt= "test "     height= "18 "/>
<script   type= "text/javascript ">
var   oFileChecker   =   document.getElementById( "fileChecker ");
function   changeSrc(filePicker)
{
        oFileChecker.src   =   filePicker.value;
}
oFileChecker.onreadystatechange   =   function   ()
{
        if   (oFileChecker.readyState   ==   "complete ")
        {
                checkSize();
        }
}
function   checkSize()
{
        var   limit     =   document.getElementById( "fileSizeLimit ").value   *   1024;

        if   (oFileChecker.fileSize   >   limit)
        {
                alert( "too   large ");
        }
        else
        {
                alert( "ok ");
        }
}
</script>    
</HEAD>  
<BODY>  
<input   type= "file "   name= "file1 "   id= "file1 "   size= "40 "   onchange= "changeSrc(this) "/>
<input   type= "text "   size= "4 "   value= "10 "   name= "hndnn "   id= "fileSizeLimit "/>   K
</BODY>  
</HTML>

这样放置运行正确,但把 <img   src= "about:blank "   id= "fileChecker "   alt= "test "     height= "18 "/> 放入BODY中时就不行了,好象是因为oFileChecker取不到值,document.getElementById( "fileChecker ")定义有错吗????

------解决方案--------------------
因为页面执行的时候是从上往下执行的,所以你把 <img src= "about:blank " id= "fileChecker " alt= "test " height= "18 "/> 放入BODY中,它就不能识别,所以会出现错误,


<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<img src= "about:blank " id= "fileChecker " alt= "test " height= "18 "/>
<input type= "file " name= "file1 " id= "file1 " size= "40 " onchange= "changeSrc(this) "/>
<input type= "text " size= "4 " value= "10 " name= "hndnn " id= "fileSizeLimit "/> K
</BODY>
</HTML>
<script type= "text/javascript ">
var oFileChecker = document.getElementById( "fileChecker ");
function changeSrc(filePicker)
{
oFileChecker.src = filePicker.value;
}
oFileChecker.onreadystatechange = function ()
{
if (oFileChecker.readyState == "complete ")
{
checkSize();
}
}
function checkSize()
{
var limit = document.getElementById( "fileSizeLimit ").value * 1024;

if (oFileChecker.fileSize > limit)
{
alert( "too large ");
  相关解决方案