如何做出象淘宝的那样上传方式呢？选择了图片后，直接在旁边显示出缩略图

[wingcn]

如题。即按了浏览按钮选择了欲上传的图片，然后图片直接在旁边显示出缩略图。请各位高手赐教。最好能给我推荐一款能实现以上功能的程序

[lonehare]

用Javascript嘛，没什么难度啊！img.src = "file://" + xxx.value;

• 打赏
• 举报

回复 赞

[zsnail]

<SCRIPT LANGUAGE="JavaScript">
<!--
function InitMsgBox(obj){
var img = new Image();
img.src = obj.value;
document.getElementById("td1").appendChild(img);
}

//-->
</SCRIPT>
><BR>
<TABLE border="0">
<TBODY>
<TR>
<TD align="left">
<INPUT type="file" style="background:#ffffff" name="getfile" id="getfile" onunblur="getfile_onclick" class="btn" onchange='javascript:InitMsgBox(this)'>
</TD>
</TR>
<TR>
<TD id="td1"></TD>
</TR>
</TBODY>
</TABLE>

• 打赏
• 举报

回复 赞

[zsnail]

<SCRIPT LANGUAGE="JavaScript">
<!--
var flag=false;
function DrawImage(ImgD){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
ImgD.width=image.width;
ImgD.height=image.height;
ImgD.alt=image.width+"×"+image.height;
}
}
function mainChange(Value){
flag=false;
document.all.mainimage.width=10;
document.all.mainimage.height=10;
document.all.mainimage.alt="";
document.all.mainimage.src=Value;
document.all.maindiv.style.display='';
}

//-->
</SCRIPT>
<TABLE border="0">
<TBODY>
<tr>
<td height="22" colspan="5">
top:<input type="file" name="up1" style="width:300" class="textbox" onChange="javascript:mainChange(this.value);">
</td>
</tr>
</TBODY>
</TABLE>
<table width="629" height="78" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="341" align="center"><div id="maindiv" style="display:none"><IMG id=mainimage height=70 width=20 src="" onload="javascript:DrawImage(this);" ></div></td>

</tr>
</table>

• 打赏
• 举报

回复 赞

[zsnail]

当然还可以定义图片显示大小

• 打赏
• 举报

回复 赞

[chenguang79]

zsnail(唉!!)
的程序就不错。

• 打赏
• 举报

回复 赞

[chinastorm]

zsnail(唉!!) 的代码不错
收藏！

• 打赏
• 举报

回复 赞

[dingmin]

唉,LZ没做过后台的~

• 打赏
• 举报

回复 赞