日期:2014-05-16  浏览次数:20433 次

请问用jQuery图片上传怎样实现实时预览?
请教各位高手,在图片上传之前对图片进行本地预览,用jQuery怎样实现?要兼容IE6+,和FF3+?

------解决方案--------------------
这里有一个图片预览
兼容ie ff
------解决方案--------------------
JScript code


只兼容 IE

<table width="90%" border="0" cellspacing="0" cellpadding="0">   
    <tr> 
        <td>
             <img width="60" height="60" id="picdemo">
        </td>
        <td>   
          <input  type="file"  id="file" class="allinput" onchange="loadimg();" />&nbsp;   
          <input  type="submit"  name="submit"  value="上传" />   
        </td>   
    </tr>   
  </table>  
<script type="text/javascript">   
function loadimg(){
    var img = new Image();
    img.src=document.all.file.value;  
    alert( '上传图片的宽度为' + img.width + 
          '上传图片的高度为'+img.height+'上传图片的大小为'+size(img.fileSize));
    document.getElementById('picdemo').src = img.src;
}
function size(len){
    var kb=len/1024;
    if(kb<1024)
        return kb.toFixed(2)+"K";
    else
    {
        var m=kb/1024;
        return m.toFixed(2)+"M";
    }
}
</script>

------解决方案--------------------
JScript code
 <script type="text/javascript">
        
          function Upzp1_onchange() {
            var e = window.event.srcElement
            var str = e.value
            var Preview
            if (str != "") 
            {
                var pos = str.lastIndexOf(".");
                var lastname = str.substring(pos, str.length)  //此处文件后缀名也可用数组方式获得str.split(".")
                if (lastname.toLowerCase() != ".jpg") 
                {
                    alert("您选择的图片类型必须为.jpg");
                    return false;
                }
                else 
                {
                    var FileMaxSize = 200;//限制上传的文件大小,单位(k)
                    var img=new Image();
                    img.src=e.value;
                    Preview= document.getElementById("Preview");
                    Preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src =img.src;
                    Preview.style.width = "200px";
                    Preview.style.height = "200px";

                }   
            }
        }
        function showpic()
    {
        document.getElementById("Image1").src= document.getElementById("FileUpload1").value;
        }    
</script>