上传图片的样式

最近两天，在给公司做活动，其中有一个图片上传的样式，一般图片的上传都是这样的：

 

 

（对了，csdn的图片上传在chrome下怎么没有浏览呢。。 不能上传图片，后来发现在后面的空白处单击才行！）

 

可我们的需求是这样的：

 

 

我觉的这样式美工应该搞定的，tm美工又没时间，没办法自己弄吧，在网上找了一些也没有合适的，操自己想。

 

第一种想法是：

                    用一个div，把<input type="file" ..>覆盖，当点击浏览图片的时候，相当于<input type="file" ..>focus+select+回车键，然后把<input type="file" ..>的值，赋给div,不就行了。

 <div id="uptupian">

<input type="file" id="upload" name="upload" style="display:aaa"/>

</div>

<div οnclick="find(event);" >点我上传</div>

<script>

function find(e){

var obj=document.getElementById("upload");

obj.click();

obj.select();

obj.focus();

var event = (e)?e:window.event;

event.keyCode=13;

}

</script>

 

可问题是偏偏是在火狐下，不能用，真是气死我了。。。这个思路断了，哪位高手知道，请多多指教。。 不胜感激！！

 

第二种想法是：

把<input type='file'...>放入div中控制他的width,height,postion是absolute,透明度为0,定位在指定的图片上，就可以了。靠，又是firefox的问题，div控制不了样式，...... 对，用size='1',控制到最小。这样你点击图片相当于是点击<input type='file'..>

对了，前面是一个<input ..>，这样就模仿出了上传图片的样式了。。谢天谢地。只要样式出来，剩下就是我们code的问题了。

代码大概是（是从项目上弄下的没有单独测）

/* file设为透明 */

#upfiles{

width:70px;

height:55px;

/*background-color:red;*/

position:absolute; 

z-index:2100;

top:125px;

left:585px;

filter:alpha(opacity=0);

  opacity:0;

  cursor:pointer;

}

</style>

<div class="photo_in">

                     <p><b>上传您和侯佩岑的合影:</b></p>

                        <p class="in_text"><input type="text" id="picsrc" readonly><input type="file" name='upfiles' id="upfiles" class="files" οnchange="loadimg()"  size="1"/></p>

                    </div>

                    <div class="right"><input type="image" src="{STYLEIMGDIR}patty/btn_05.gif" οnclick="return false" /><input type="image" src="{STYLEIMGDIR}patty/btn_06.gif" style="cursor:pointer;"/></div>

 

function loadimg(){

var imgsrc = document.getElementById("upfiles").value;

document.getElementById("picsrc").value = imgsrc;

}

 

哇，基本可以实现了。。。 有什么问题可以留言啊！