上傳文件 隱藏input type="file",用text顯示

 

<div>
    <span>上傳文件：</span>
    <input type="file"  id="upload_file" style="display: none;" onchange="change();">  
    <input type="text"  id="upload_file_tmp"  readonly="readonly" onclick="upload_file.click(); ">
    <button type="button" class="file" id="select_file"  onclick="upload_file.click();" >  
        選擇文件
    </button>
</div>

 

input[type="text"] {
    height:20px;
    border:none;
    border-bottom:1px solid #ccc;
    width:150px;
    margin-right:10px; 
    outline:none;
    height:25px;
     
}
.file {
   outline: none;
       border:none;
    background: #67BEF4;
    border-radius: 4px;
    padding: 4px 12px;
   cursor:pointer;
    color: #fff;
    font-size:18px;
    line-height: 20px;
    vertical-align: middle;
}

 

function change(){  
    document.getElementById("upload_file_tmp").value=document.getElementById("upload_file").value; 
}