87,997
社区成员
发帖
与我相关
我的任务
分享初学问个问题 怎么用js实现上传图片时可以在页面预览图片的效果啊?谢谢大神
<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图片可以显示选择的图片啊
<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图片可以显示选择的图片啊
...全文
请发表友善的回复…
发表回复
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对象就可以了啊
斯洛文尼亚旅游 2015-10-27
- 打赏
- 举报
malayee 2015-10-26
- 打赏
- 举报
就谷歌浏览器呢
娃都会打酱油了 2015-10-26
- 打赏
- 举报
对于这种支持html5的随便搜搜了啊http://blog.csdn.net/varkychan/article/details/8223979
娃都会打酱油了 2015-10-26
- 打赏
- 举报
因为各种兼容性问题，一般建议还是上传后再显示……
否则的话你可以去找下这种js实现
