您的位置：首页 > Web前端 > HTML

HTML上传即时显示图片

2015-09-04 14:56 731 查看 

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
可先看看这篇文章了解一下FileReade上代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src='./jquery-1.11.1.min.js'></script>
</head>
<body>
<li>
<div class='am-g'>
<div styel="width:100px; height:100px">

</div>
<div>
<input type="file" name="imgUpload" id="imgUpload">
</div>
</div>
</li>
<script>
$("#imgUpload").change(function(e) {
for (var i = 0; i < e.target.files.length; i++) {
var file = e.target.files.item(i);
var freader = new FileReader();
freader.readAsDataURL(file);
freader.onload = function(e) {
var src = e.target.result;
$("#uploadhead").attr("src",src);
}
}
});
</script>
</body>
</html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航