造型輸入類型=「文件」。如何顯示文件路徑？

我一直在嘗試設置輸入類型=「文件」字段的樣式。我的按鈕是風格，但我似乎無法弄清楚如何讓用戶選擇要上傳的文件時顯示文件路徑/文件。任何人都可以幫助嗎？造型輸入類型=「文件」。如何顯示文件路徑？

<form action="" method="POST" enctype="multipart/form-data"> 
    <div class="fileupload-buttonbar"> 
     <label class="file-upload"><span>Upload....</span><input name="uploadfile" type="file"> </label>  
    </div> 
</form>

的CSS ...

.file-upload { 
    overflow: hidden; 
    display: inline-block; 
    position: relative;  
    vertical-align: middle; 
    text-align: center; 
    color: #fff; 
    border: 2px solid #707070; 
    background: #A0A0A0; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    border-radius: 8px; 
    text-shadow: #000 1px 1px 4px; 
    cursor:pointer; 
} 
.file-upload:hover { 
    background: #2FA2FF; 
} 
.file-upload.focus { 
    outline: 2px solid yellow; 
} 
.file-upload input { 
    position: absolute; 
    top: 0; 
    left: 0; 
    margin: 0; 
    font-size: 12px; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    z-index:-1; 
} 
.file-upload span { 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: inline-block; 
    padding-top: .45em; 
} 
.file-upload { height: 38px; } 
.file-upload, 
.file-upload span { width: 160px; }  
.file-upload-status { 
    margin-left: 10px; 
    vertical-align: middle; 
    padding: 7px 11px; 
    font-weight: bold;  
    font-size: 16px; 
    color: #888; 
    background: #f8f8f8; 
    border: 3px solid #ddd; 
}

我的代碼是在這裏 http://jsfiddle.net/hjNEC/

來源

2012-12-28 AttikAttak

出於安全原因，有關文件本身與用戶操作系統相關的信息受*保護。您可以獲取文件的名稱，但不能保存文件的存儲路徑。 – cimmanon

+1 @ @immanon。此外，無論您使用什麼樣式，請在每個您想要支持的瀏覽器上進行徹底檢查，因爲不同的瀏覽器呈現的文件控制*與其他*非常*不同，而且它們中的大多數對於它如何可能會有一些限制風格。 – Spudley

一個change事件添加到輸入字段，然後就得到它的.value。

例（使用jQuery）：

$('input[name="uploadfile"]').change(function(){ 
    var fileName = $(this).val(); 
    alert(fileName); 
});

DEMO：http://jsfiddle.net/hjNEC/2/

編輯：由於輸入字段是隱藏的，文件名也是其中的一部分，你會得在頁面上自行顯示fileName。

來源

2012-12-28 20:46:27

您好... 完美......我做了JS的該位因此，它顯示的文件名在「選擇文件」標籤的按鈕...感謝您的幫助.... 快樂的新年！ – AttikAttak

@AttikAttak：不客氣！ :-D –

<form action="" method="POST" enctype="multipart/form-data"> 
    <div class="fileupload-buttonbar"> 
      <input type="file" name="uploadfile" id="uploadfile" style="display:none" onchange="file_path_display.innerHTML=uploadfile.value"/> 
      <span class="file-upload" onclick="uploadfile.click()" ondragdrop="uploadfile.dragdrop()">Upload....</span> 
      <div id="file_path_display"></div> 
    </div> 
</form>

來源

2014-11-30 15:44:34

請包括一些討論/評論爲什麼你認爲這是一個答案.. – Jayan

造型輸入類型=「文件」。如何顯示文件路徑？

回答

相關問題