3个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form enctype="multipart/form-data" name="form1">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品缩略图，图片大小230*230</label><br />
<input id="f" type="file" name="f" onchange="change1()" value="" />
<p>
<img id="preview" alt="" name="pic" style="width: 230px;" />
</p>
</form>
<form enctype="multipart/form-data" name="form1">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品缩略图，图片大小600*600</label><br />
<input id="f2" type="file" name="f" onchange="change2()" value="" />
<p>
<img id="preview2" alt="" name="pic" style="width: 600px;" />
</p>
</form>
<script>
var pic = document.getElementById("preview"),
file = document.getElementById("f");
var pic2 = document.getElementById("preview2"),
file2 = document.getElementById("f2");
function change1() {
change(pic,file)
}
function change2() {
change(pic2,file2)
}
function change(pic,file) {
var ext = file.value.substring(file.value.lastIndexOf(".") + 1).toLowerCase();
// gif在IE浏览器暂时无法显示
if(ext != 'png' && ext != 'jpg' && ext != 'jpeg') {
alert("图片的格式必须为png或者jpg或者jpeg格式！");
return;
}
var isIE = navigator.userAgent.match(/MSIE/) != null,
isIE6 = navigator.userAgent.match(/MSIE 6.0/) != null;
if(isIE) {
file.select();
var reallocalpath = document.selection.createRange().text;
// IE6浏览器设置img的src为本地路径可以直接显示图片
if(isIE6) {
pic.src = reallocalpath;
} else {
// 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现
pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
// 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
}
} else {
html5Reader(file,pic);
}
}
function html5Reader(file, pic) {
var file = file.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
pic.src = this.result;
}
}
</script>
</body>
</html>
非原创 也是别人的代码 我自己做了一个封装可以做多个上传按钮.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form enctype="multipart/form-data" name="form1">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品缩略图，图片大小230*230</label><br />
<input id="f" type="file" name="f" onchange="change1()" value="" />
<p>
<img id="preview" alt="" name="pic" style="width: 230px;" />
</p>
</form>
<form enctype="multipart/form-data" name="form1">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品缩略图，图片大小600*600</label><br />
<input id="f2" type="file" name="f" onchange="change2()" value="" />
<p>
<img id="preview2" alt="" name="pic" style="width: 600px;" />
</p>
</form>
<script>
var pic = document.getElementById("preview"),
file = document.getElementById("f");
var pic2 = document.getElementById("preview2"),
file2 = document.getElementById("f2");
function change1() {
change(pic,file)
}
function change2() {
change(pic2,file2)
}
function change(pic,file) {
var ext = file.value.substring(file.value.lastIndexOf(".") + 1).toLowerCase();
// gif在IE浏览器暂时无法显示
if(ext != 'png' && ext != 'jpg' && ext != 'jpeg') {
alert("图片的格式必须为png或者jpg或者jpeg格式！");
return;
}
var isIE = navigator.userAgent.match(/MSIE/) != null,
isIE6 = navigator.userAgent.match(/MSIE 6.0/) != null;
if(isIE) {
file.select();
var reallocalpath = document.selection.createRange().text;
// IE6浏览器设置img的src为本地路径可以直接显示图片
if(isIE6) {
pic.src = reallocalpath;
} else {
// 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现
pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
// 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
}
} else {
html5Reader(file,pic);
}
}
function html5Reader(file, pic) {
var file = file.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
pic.src = this.result;
}
}
</script>
</body>
</html>
非原创 也是别人的代码 我自己做了一个封装可以做多个上传按钮.
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
代码很简单
不懂的话,可以加我QQ:1565804
大家一起讨论下
<html>
<head>
<script>
function seeimg(){
if(document.getElementById("imgfile").value!=""){
document.getElementById("imgdisplay").style.display="block";
document.getElementById("imgdisplay").src=document.getElementById("imgfile").value;
}else{
document.getElementById("imgdisplay").style.display="none";
}
}
</script>
</head>
<body>
<input type="file" id="imgfile" onchange="seeimg();"/>
<img id="imgdisplay" style="display:none;"/>
</body>
</html>
不懂的话,可以加我QQ:1565804
大家一起讨论下
<html>
<head>
<script>
function seeimg(){
if(document.getElementById("imgfile").value!=""){
document.getElementById("imgdisplay").style.display="block";
document.getElementById("imgdisplay").src=document.getElementById("imgfile").value;
}else{
document.getElementById("imgdisplay").style.display="none";
}
}
</script>
</head>
<body>
<input type="file" id="imgfile" onchange="seeimg();"/>
<img id="imgdisplay" style="display:none;"/>
</body>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
