第一部分：樣例圖片，成功後如下圖：

第二部分：css美化程式碼

<style>
        .sp-center-1000{ width:1000px; margin:0 auto;}
        /*將file控制元件滑鼠移入變成手型*/
        input[type='file'] {
            cursor: pointer !important;font-size: 0;
        }
        .sp-upload {
            position: relative; display: block; min-height: 36px;
            overflow: hidden; vertical-align: middle;
        }
        .sp-upload-btn-single {
            position: absolute; left: 10px; outline: none;  border: 0;
            height: 30px; line-height: 30px; padding: 0 5px; color: #fff;
            background: #1c84c6; cursor: pointer !important;
            margin: 3px 0; border-radius: 3px;
        }
        .sp-upload-btn-single:hover { background: #1c7dbb;  }
        .sp-upload-file-single {  
            position: absolute;    left: 10px;
            width: 68px;   height: 34px;line-height: 34px; top: 0; opacity: 0;
            filter: alpha(opacity=0); cursor: pointer !important; cursor: pointer !important;
        }
        .sp-upload-tip {
            float: left;  width: 100%;  margin-top: 35px; padding: 2px 10px;
            color: #666; font-size: 13px !important;
            border-radius: 3px;  display: none; text-align: left;
        }
    </style>

第三部分：html程式碼

<div class="sp-center-1000">        
        <span class="sp-upload">
            <input type="button" class="sp-upload-btn-single" value="上傳附件">
            <span class="sp-upload-tip"></span>
            <input type="file" class="sp-upload-file-single">
        </span>
    </div>

第四部分：js--最為重要的部分

<script>
        if ($("body").find(".sp-upload-file-single").length > 0) {
            $(".sp-upload .sp-upload-file-single").change(function () {
                if ($(this).parent().children(".sp-upload-btn-single").length > 0) {
                    ////按鈕風格
                    var file = this.files[0];
                    if (file.size > 52428800) {
                        alert("檔案大小不能大於50M");
                        file = null;
                        return false;
                    } else {
                        var file = this.files[0];
                        var $this = $(this);
                        var fileUrl = $this.val();
                        var urlArr = fileUrl.split("\\");
                        var getName = urlArr[urlArr.length - 1];//擷取路徑並獲取檔案的名字                        
                        var formData = new FormData();///宣告FormData
                       formData.append("streamFile", $this[0].files[0]);///將存放在引數名streamFile中的file中的資料一起append到formData
                        $.ajax({
                            url: "GoldFile/stream/upload",//這裡寫你的後端服務的url
                            type: 'POST',
                            cache: false, //上傳檔案無需快取
                            data: formData,
                            processData: false,// 是否序列化data屬性，預設true(注意：false時type必須是post)
                            contentType: false,// 當有檔案要上傳時，此項是必須的，否則後臺無法識別檔案流的起始位置
                            success: function (res) {
                                //console.log(res);
                                //////這句話的目的是將檔名和返回的檔案路徑，顯示在div中，方便日後獲取
                                var setdiv = "<div class='sp-lh-20' data-url='" + res.url + "'>" + getName + "</div>"; 
                                $this.parent().find(".sp-upload-tip").show(200).append(setdiv);
                                alert("您好，附件上傳成功");
                            },
                            error: function (data, status, e) {
                                alert("您好，附件上傳失敗");
                                console.log(e);
                            }
                        });

                    }
                }
            });
        }        
    </script>