用圖片代替上傳文件的按鈕

<div class="col-md-4"> 
    <div class="thumbnail text-center cnImgUp"> 
        <p class="cnIcon"> 
            <i class="glyphicon glyphicon-picture"></i>
        </p>
        <p class="cnTxt">添加圖片</p>
        <input type="file" multiple="" name="uploadPic[]" class="uploaderfile" id="uploaderfile">
    </div>
</div>

<style type="text/css"> 
    .cnImgUp { position:relative; margin-bottom:15px; background-color:#eaeaea;cursor:pointer }
    .cnImgUp .cnIcon { margin-top:25px;margin-right:0px;}
    .cnImgUp .cnIcon i { font-size:40px;color:#cbcbcb; }
    .cnImgUp .cnTxt { margin-top:15px;margin-bottom:15px;color:#afafaf; }
    .uploaderfile{width:100%;height:125px;position:absolute;left:0;top:0;z-index:3;opacity:0;background:rgba(0,0,0,0) none repeat scroll 0 0;border:0 none;cursor:pointer}
</style>