<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <meta name="author" content="EdieLei" /> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"> <title>HTML5 图片上传预览</title> <style> #photo{ width:100px; height:100px; margin:auto; margin-top:100px; background:#0cc; border-radius:100px;} #photo img{ width:100px; height:100px; border-radius:50px;} </style> <script src="js/jquery.min.js"></script> <script type="text/javascript"> $(function() { $('#img').change(function() { var file = this.files[0]; var r = new FileReader(); r.readAsDataURL(file); $(r).load(function() { $('#photo').html('<img src="' + this.result + '" alt="" />'); }) }) }) </script> </head> <body> <h3>HTML5 图片上传预览</h3> <input id="img" type="file" accept="image/*" /> <div id="photo"></div> </body> </html>
HTML5图片上传预览,手机端
猜你喜欢
转载自hnlixf.iteye.com/blog/2335100
今日推荐
周排行