请问用jQuery图片上传怎样实现实时预览？

Question

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

Answer 1

这里有一个图片预览
兼容ie ff

Answer 2

那个我也看你写的`不过在ie6和ie7下有叉！

Answer 3

只兼容 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>

Answer 4

 <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>
<td> 
<asp:FileUpload ID="FileUpload1" runat="server" onchange="return Upzp1_onchange()" />
</td>

Answer 5

你既然用jquery 网上N多各种各样组件，搜呗

Answer 6

这个方法不兼容IE8+ 
$('#file').onchange(function() {
  $('#img').attr('src','file:///'+$('#file').val());
  $('#a')[0].href = 'file:///'+$('#file').val();
});