有時候我們想點擊一個按鈕打開目錄文件選擇文件的路徑顯示，方法如下：

如果使用原生js:

文件上傳比較丑，樣式調整時會有一個獲取文件名，或者包含文件路徑的文件名的方法

html代碼

<div class="file-box"> <form id="uploadForm"> <input type="text" id="textfield" class="txt" /> <input type="button" class="btn" value="瀏覽..." /> <input type="file" name="file" class="file" id="fileField" onchange="document.getElementById('textfield').value=this.files[0].name"/> <input type="submit" class="btn" value="上傳" /> </form> </div>

CSS樣式

.file-box{ position:relative;width:340px;margin:20px;}
.txt{ height:28px;line-height:28px; border:1px solid #cdcdcd; width:180px;}
.btn{width:70px; color:#fff; border:0 none;height:28px; line-height:16px!important;cursor:pointer;}
.btn:hover{background-color:#63bfff;color:#fff;}
.file{ position:absolute; top:0; right:85px; height:30px;line-height:30px; filter:alpha(opacity:0);opacity: 0;width:254px }

效果圖

只獲取文件名

document.getElementById('fileField').files[0].name

獲取帶路徑的文件名

document.getElementById('fileField').value

?

在vue中使用：

html：

<el-form-item label="存儲路徑">
<el-input v-model="dataForm.road"></el-input>
<input type="file" id="file_input" @change='uproad()'>
</el-form-item>

?

js:

uproad(){
this.dataForm.road=document.getElementById('file_input').value;
},

結果：

?分割線：

說下怎么更換file按鈕上的文字。

解決方法：

　　1)頁面上放個隱藏的<input type=“file” />

　　2)然后加上一個文本input（type="text"）和一個按鈕input（type="button"）

　　3)點按鈕的時候調用<input type=file />的click選擇文件

　　4)在<input type=file />的onchange事件中把其值顯示在文本input中

　　5)注意把文本input設置成只讀的，防止出錯　　

<form name="form1"><input type="file" name="picpath" id="picpath" style="display:none;" onChange="document.form1.path.value=this.value"><input name="path" readonly><input type="button" value="上傳照片" οnclick="document.form1.picpath.click()"> </form>

　　

我這里是vue項目采用：

?

效果：

?

?這樣也可以隱藏后邊的

?

轉載于:https://www.cnblogs.com/sweeeper/p/11268972.html

總結

以上是生活随笔為你收集整理的上传文件路径的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。