日期:2014-05-16  浏览次数:20473 次

html input=file web页面如何能实现qq一样,上传图片直接会打开浏览框
在我的web页面里引入了一个文本编辑器,其中一个功能是插入图片,一般的都是点击插入图片,
弹出一个页面,用input type=file 来浏览本地图片,点击上传,然后上传到服务器上,再显示在文本编辑框里.
现在客户提出,要求像qq一样,点击插入图片,直接就弹出浏览框,也就是说直接就是点击了input file的浏览按钮后的效果.
请各位给指点一下.

------解决方案--------------------
用透明层做啊这要美工的基本工了
------解决方案--------------------
火狐不支持 

<script type="text/javascript">
function loadimg(){
var img = new Image();
img.src=document.all.file.value;
alert( '上传图片的宽度为' + img.width + 
'上传图片的高度为'+img.height+'上传图片的大小为'+size(img.fileSize));
document.getElementById('picdemo').src = img.src;
}
function size(len){
var kb=len/1024;
if(kb<1024)
return kb.toFixed(2)+"K";
else
{
var m=kb/1024;
return m.toFixed(2)+"M";
}
}
</script>


 
<table width="90%" border="0" cellspacing="0" cellpadding="0">
<tr> 
<td>
<img width="60" height="60" id="picdemo">
</td>
<td>
<input type="file" id="file" class="allinput" onchange="loadimg();" />&nbsp;
<input type="submit" name="submit" value="上传" />
</td>
</tr>
</table>
<select name="mysele" id="mysele">
<option value="请选择">请选择</option>
</select>

------解决方案--------------------
可以用这个上传系统选择后立即上传