初学问个有关问题 如何用js实现上传图片时可以在页面预览图片的效果啊多谢大神
初学问个问题 怎么用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图片可以显示选择的图片啊
------解决思路----------------------
<!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>
整个文档拷给你了，可以运行起来看看
------解决思路----------------------
javascript客户端图片预览，兼容最新firefox，chrome和IE11
<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图片可以显示选择的图片啊
------解决思路----------------------
<!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>
整个文档拷给你了，可以运行起来看看
------解决思路----------------------
javascript客户端图片预览，兼容最新firefox，chrome和IE11