隐藏file直接上传图片

问题：在上传图片时，常常不希望显示file标签，而只需要一个上传按钮，点击可选择要上传图片。选择后则立即上传。

解决方案：出于安全考虑，file不能通过程序触发click事件，也不能通过js给value赋值。一般的实现方式是通过css样式将file设置为透明，置于按钮上方。用户点击“上传”按钮时，实际点击的是file。

实现思路：以下是其中一种实现方式，在IE、FireFox及Google Chrome上都能正常显示。将file置于div中，div设置一张按钮图片作为背景，将file设置为透明，且file的浏览按钮铺满div。则用户点击div背景按钮时，实际是点击透明度为0的file。另file的onchange事件中实现了上传逻辑，则在用户选择图片后，就会触发file的onchange事件，实现立即上传。

关键代码：

        .uploadDiv
        {
            background: url(upload.jpg);
            height: 30px;
            width: 90px;
        }
        .uploadFile
        {
            opacity: 0;
            filter: alpha(opacity=0);
            width: 90px;
            font-size: 40px;
            height: 30px;
        }

 

<img alt="" style="width: 90px; height: 90px;" src="noImg.jpg" id="img1" />
<div  class="uploadDiv">
    <input class="uploadFile" onchange="ajaxFileUpload(this)" id="filePic" name="filePic" class="file" type="file" />
</div>

 

显示效果：　　　　　

图片资源：