Asp.Net中使用使用input的file类型进行图片上传（美化file控件）

16

2014
07

html上传代码：

   <div class="addPicture" style="position: relative; clear: both;">
        <div style="width: 300px; height: auto; float: left; margin-left: 0px; margin-top: 0px;
            display: none;" class="img_middle">
            <img src="" width="300px" alt="" />
        </div>
        <div style="width: 84px; text-align: center; margin-left: 106px; margin-top: 46px;
            *margin-left: 0px;" id="addImg" title="点击添加标题图">
            <div>
                <input type="button" id="Button1" value="" class="addimg" /></div>
            <div class="a">
                添加标题图</div>
        </div>
        <input id="upFile" name="upFile" type="file" title="" class="file_transparent" />
    </div>

input的file样式，使file透明只看得见底部图片或文字，并百分百：

.file_transparent
{
    width: 100%;
    height: 100%;
    font-size: 130px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    overflow: hidden;
    *width: 300px;
    *height: 200px;
    *font-size: 57px;
}

效果图：

QQ截图20140716213714.png

点击该框都可以弹出选择文件层，结合input改变事件，就可以实现点击直接上传图片。

$("#upFile").change(function (e) {
uploadImg('upFile');
});

需要注意的是改变事件会只能上传一次，需要从新将这个控件重新创建：

$(".addPicture").find("#upFile").remove();
var content = '<input id="upFile" name="upFile" type="file" title="" class="file_transparent" onchange="uploadImg(\'upFile\');" />';
$(".addPicture").append(content);