文件上傳時樣式美化,以及文件名回顯

前端效果：

 

 

首先,頁面我們引入bootstrap風格,然后將文件上傳那一塊改成button按鈕樣式,美化上傳的樣式,將原本的上傳樣式利用opacity:0將透明度改為0不顯示。接着我們將自己設置的新按鈕，位置轉移到我們的上傳文件處，點擊按鈕即觸發了隱藏的真實上傳按鈕控件。

html代碼：

    <form id="fileUpload" name="upload" action="http://127.0.0.1:8088/idif/upload.do" method="post" enctype="multipart/form-data" onsubmit="return validForm(this)">
<button type="button" class="upload btn btn-primary btn-large" style="width:100px;height:35px;">選擇文件<div style="margin-top:-30px;margin-left:-200px;opacity:0"><input type="file" name="file" id="file" onchange="change()"></div></button>

  <div align="center" style="width:500px;height:50px;margin:auto;margin-top: 15px;color:red;"><b><font id="uploadbackname" style="color:red;">未選擇文件</font></b></div>

        <input name="smid" id="smid" type="hidden">  
        <div ><button  type="submit" class="btn btn-primary btn-large" >提交</button></div>
    </form>

 

上傳文件的input框，我們設置一個onchange方法，這個方法就是當input的值域發生變化時觸發，上傳文件后，值域變化，所以觸發此事件，然后獲取文件名，動態顯示文件名。

JS代碼：

function change() {
         debugger;
        //獲取上傳文件名
        var filename = $("#file").val();
         //C:\fakepath\明朝歷史時間表格.xls,將路徑替換掉,這個路徑是錯的,一直不變.
        var rpfilename = filename.replace('fakepath','').replace('C:','').replace().replace("\\\\","");
        //動態回顯名字
        $("#uploadbackname").html(rpfilename);
      }