2017-06-20 138 views
0

我想上傳我的文件,當用戶點擊查看按鈕,如下面的代碼所示。我已經嘗試了下面的代碼。任何形式的幫助表示讚賞。 謝謝。如何上傳文件按鈕點擊

#myInput { 
 
    width: 50%; 
 
    padding: 12px 20px 12px 40px; 
 
    border: 1px solid #000; 
 
    display: inline-block; 
 
} 
 

 
input[type=file]::-webkit-file-upload-button { 
 
    width: 0; 
 
    padding: 0; 
 
    margin: 0; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    border: none; 
 
    border: 0px; 
 
} 
 

 
x::-webkit-file-upload-button, 
 
input[type=file]:after { 
 
    -webkit-appearance: button; 
 
    -moz-appearance: button; 
 
    border-collapse: separate; 
 
    border-radius: 7px; 
 
    -webkit-border-radius: 7px; 
 
    --moz-outline-radius: 7px; 
 
    content: 'View'; 
 
    color: #080708; 
 
    background: #e3e3e3; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    left: 100%; 
 
    margin-left: 50px; 
 
    position: relative; 
 
    padding: 10px 46px 10px 40px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" name="myInput" id="myInput">

+1

有效的表單標籤? – rtfm

+2

您的HTML有效,而您的CSS無關緊要。另外,我沒有看到JavaScript和PHP。您需要將上傳包裝在'

'中,並[用PHP **處理文件上傳](http://php.net/manual/en/features.file-upload.post-method.php) 。 –

+3

良好的起點http://php.net/manual/en/features.file-upload.post-method.php – rtfm

回答

1

文件上載到服務器需要後端的編程,比如PHP,例如,理想的一些JavaScript驗證。在這種特殊情況下,CSS並不重要,因爲它不會在任務中發揮作用,而只是爲了美觀。

您將需要創建:

  1. 的HTML形式,將提交的multipart/form-data的(加密類型),最好是在後(方法)到一個特定的文件服務器上的(動作)

  2. 服務器上的文件需要PHP等後端編程來處理上傳的文件並將其保存在服務器的某個位置。

  3. 您必須驗證您的表單(JavaScript)以及發送到服務器(PHP)的文件和數據,以保護您免受惡意文件和數據的侵害。

我相信,通過這些信息,您可以更好地瞭解如何完成任務並針對您的目標進行更具體的研究。

這裏是一個已經存在了一段時間的教程: http://www.tizag.com/phpT/fileupload.php

好運。

0

你應該把輸入標籤到表單標籤這樣

<form action="" enctype="multipart/form-data" method="post"> 
    <input type="file" name="myInput" id="myInput"> 
    <input type="submit" value="submit"> 
</form> 

還需要PHP(或其他一些),以恢復您的服務器上上傳文件。