效果圖如下：
思路：
1：打開文件設置為透明，外面包一層標簽，給標簽設置顏色背景，給人點擊瀏覽其實是點擊打開文件的錯覺。（給外標簽相對定位，打開文件標簽絕對定位）。
2：點擊瀏覽后，選擇了文件，就把文件名賦值給前面自己創建的input框里面，前面的input框自己單獨寫出來。給樣式。
3：上傳按鈕既上傳文件到服務器的操作，請求接口即可。
代碼：
css：
.chooseFile{
border: 1px solid #cccccc;
width: 97%;
height: 28px;
border-radius: 5px;
opacity: 0;
display: inline-block;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
#uploadForm{
position: relative;
cursor: pointer;
border-color: #204d74;
border-radius: 4px;
/* overflow: hidden; */
width: 60px;
font-size: 14px;
background-color: #e8340c;
border-radius: 4px;
line-height: 30px;
color: white;
text-align: center;
margin: 0 7px;
}
.inputName{
width: 60%;
height: 30px;
line-height: 30px;
padding: 0 5px;
border: 1px solid #9e9a9a;
border-radius: 5px;
}
HTML：
<div class="title">請選擇翻譯文件</div>
<div class="ibox-content piliangBox">
<input class="inputName" placeholder="請選擇要翻譯的文件" type="text" />
<form id="uploadForm" enctype="multipart/form-data" style="display: inline-block; ">
<input class="chooseFile" id="reportXML" type="file" name="file" /> 瀏覽
</form>
<button class="scOks upload">上傳</button>
</div>
js：
//點擊瀏覽，選擇文件
function choseFile() {
var fileInput = $('#reportXML').get(0).files[0];
if(fileInput){
$(".inputName").val(fileInput.name);
}
}
$("#uploadForm").click(function() {
window.setInterval("choseFile()", 100);//采用定時給input賦值，否則光瀏覽按鈕是無法同時既選擇文件又同時賦值
})
//上傳文件，這個用於上傳代碼到服務器，與樣式無關，可忽略
$(".upload").click(function() {
var fileInput = $('#reportXML').get(0).files[0];
console.info(fileInput);
if(fileInput) {
var cover = 0;
var formData = new FormData($('#uploadForm')[0]);
// formData.append("p", "{'platformId':101,'useMonoid':" +
// localStorage.getItem("monoid") + ",'cover':" + cover +
// "}");
results = Common.prototype.callPostFile("/fileToDevice/uploadFileToDevice.shtml", formData);
var results = JSON.parse(results);
console.log(results, 44)
if(results.code == 8000) {
alert("上傳成功");
localStorage.setItem("fid", results.body.fid);
$(".textOld").text(results.body.src);
} else if(results.code == 9014) {
alert("上傳文件格式錯誤！")
}
} else {
alert("請選擇上傳文件！");
}
})