input file美化 --上傳圖片

1.效果圖：

2.html部分：

<div class="sp-page-box" style="margin-top:50px;">                         
                        <div class="sp-page-column span6">
                            <h4>圖片上傳</h4>
                            <br />
                            <div class="sp-page-column span1" style="line-height: 35px;">照片：</div>
                            <div class="sp-page-column span5">
                                <span class="sp-upload">
                                    <img class="sp-upload-photo" data-url="" alt="" style="width: 200px; height: 100px;" />
                                    <input type="file" id="btnfile" class="sp-upload-img" />
                                </span>
                            </div>
                        </div>
                    </div>

3.css部分：

.sp-upload{position:relative; display:inline-block; min-height:33px;overflow:hidden;vertical-align:middle; cursor:pointer;}

.sp-upload-img{position:absolute; right:0; top:0; font-size:100px; opacity:0; filter:alpha(opacity=0);cursor:pointer; width:100%;height:100%;}
.sp-upload-photo{float:left; outline:none; width:82px;height:82px;background:url('./icons/addPhotocenter.png') center center no-repeat #fff;border-radius:3px; cursor:pointer;}

4.js部分：

$(".sp-upload .sp-upload-img").change(function () {
            var file = this.files[0];
            if (file.size > 52428800) {
                alert("圖片大小不大於50M");
                file = null;
                return false;
            }
            var fileName = file.name;
            var postfix = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
            if (postfix != "jpg" && postfix != "png") {
                alert("圖片僅支援png、jpg型別的檔案");
                fileName = "";
                file = null;
                return false;
            }


            var fileUrl = $(this).val();
            $(this).parent().children(".sp-upload-photo").attr("data-url", fileUrl);
            var getimg = $(this).parent().children(".sp-upload-photo");
            var filereader = new FileReader();
            filereader.readAsDataURL(file);
            $(filereader).load(function () {
                getimg.attr("src", this.result);
            });
        });