1

開啟編輯器，建立一個HTML文件，並且設立基本架構。

2

<form>

<input type="file">

</form>

我們引入input標籤的時候，會發現瀏覽器會自動顯示文字，這是預設的名字。

3

<input type="button" value="上傳點這裡" onclick="javascript:$('input[name=\'file\']').click();" />

<input name="fileName" readonly />

<input type="file" onchange="javascript:$('input[name=\'fileName\']').val(this.files[0].name);" />

我們這裡實際可以另外建立一個button和file，利用js的功能。

但是這裡就多了一箇舊的功能了。

4

style="display: none;"

這個時候我們需要加入這個樣式來取消掉舊的顯示。

5

當然我們也可以用CSS來指定樣式，這裡新建一個CSS文件，並與HTML文件相關聯。

6

<form>

<input type="file">

</form>

.main{

overflow:hidden;

position:absolute

}

.file{

position:absolute;

z-index:200;

margin-left:-200px;

opacity:0;

filter:alpha(opacity=0);

margin-top:-50px;

}

這裡我們新增一個a連結，然後就可以依靠這個a連結來上次檔案，主要要清除掉原來的文字。

7

a {

text-decoration:none;

border: 0.5px solid blue;

}

為了更接近原來的樣式，我們可以修改一下a連結的樣式。