文件上传时样式美化,以及文件名回显

前端效果：

 

 

首先,页面我们引入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);
      }