初学问个问题 怎么用js实现上传图片时可以在页面预览图片的效果啊?谢谢大神

malayee 2015-10-26 09:18:31
<div id="localImag"><img id="preview" src="<%=basePath%>img/${pro.img}"></div>
<input type="file" name="file" id="doc" style="display:none;" onChange="document.form1.path.value=this.value">
<input name="path" readonly>
<input type="button" value="修改照片" onclick="document.form1.file.click()" >
<input type="submit" value="确认修改" />

怎么实现选择图片后 ,img图片可以显示选择的图片啊
...全文
118 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
chanel_1 2015-10-27
  • 打赏
  • 举报
回复
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script> </head> <body> <input type="file" id="addimg"> <div id="showImgcontainer"></div> <script> $(function(){ $("#addimg").change(function(){ $("#showImgcontainer").append('<img id="showimg">'); PreviewImage(this,"showimg"); }); //js本地预览 function PreviewImage(fileObj,imgPreviewId){ var file = fileObj.files[0]; if(window.FileReader&&fileObj.files[0]){ var reader = new FileReader(); reader.onload = function(e){ document.getElementById(imgPreviewId).setAttribute("src",e.target.result); return e.target.result; } reader.readAsDataURL(file); } } }); </script> </body> </html> 整个文档拷给你了,可以运行起来看看
似梦飞花 2015-10-27
  • 打赏
  • 举报
回复
file对象就可以了啊
malayee 2015-10-26
  • 打赏
  • 举报
回复
引用 1 楼 starfd 的回复:
因为各种兼容性问题,一般建议还是上传后再显示…… 否则的话你可以去找下这种js实现
就谷歌浏览器呢
  • 打赏
  • 举报
回复
对于这种支持html5的随便搜搜了啊http://blog.csdn.net/varkychan/article/details/8223979
  • 打赏
  • 举报
回复
因为各种兼容性问题,一般建议还是上传后再显示…… 否则的话你可以去找下这种js实现

87,845

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧