2015-09-19 35 views
0

我真的試圖讓有3個輸入形式:文件上傳和數據(文本)形式轉換成HTML表格

  • 圖像(文件)上傳
  • 1文本字段
  • 第二個文本字段(將輸入的文本保存爲.txt文件,並在第三列顯示鏈接)

輸入所有3個輸入後,我想將數據添加到現有的html表中作爲附加行。

您能否建議我應該從哪裏開始?我是否需要使用mySQL才能完成此操作?或者我只能使用PHP和jQuery?

這裏是鏈接到我的網頁:https://jsfiddle.net/tvLn0qw7/

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>title</title> 

<style type="text/css"> 

html,body { 
margin:0; 
padding:0; 
height:100%; /* needed for container min-height */ 
background:white; 

font-family:arial,sans-serif; 
font-size:small; 
color:#666; 
} 

h1 { 
font:1.5em georgia,serif; 
margin:0.5em 0; 
} 

h2 { 
font:1.25em georgia,serif; 
margin:0 0 0.5em; 
} 
h1, h2, a { 
    color:orange; 
} 

p { 
line-height:1.5; 
margin:0 0 1em; 
} 

div#container { 
position: relative; /* needed for footer positioning*/ 
margin: 0 auto; /* center, not in IE5 */ 
width: 1000px; 
background-color: #FFFFFF; 
height: auto !important; /* real browsers */ 
height: 100%; /* IE6: treaded as min-height*/ 
min-height: 100%; 
border: 2px solid #000000; 
} 

div#header { 
padding: 1em; 
background: #ddd url("../csslayout.gif") 98% 10px no-repeat; 
border-bottom: 6px double gray; 
text-align: center; 
margin: 0 auto; 
} 
div#header p { 
    font-style:normal; 
    font-size:1.1em; 
    margin:0; 
} 

div#content { 
padding:0em 0em 5em; /* bottom padding for footer */ 
border-color: #000000; 
border: 2px; 
} 
div#content p { 
    text-align:justify; 
    padding:0 1em; 
} 

div#footer { 
text-align:center; 
position:absolute; 
width:100%; 
bottom:0; /* stick to bottom */ 
background:#ddd; 
border-top:6px double gray; 
} 
div#footer p { 
    padding:0.5em; 
    margin:0; 
} 

table { 
margin: auto; 
text-align: center; 
color: #0454A8; 
font-size: xx-large; 
font-style: normal; 
font-weight: bold; 
border: 1px; 
border: #000000; 
} 


body,td,th { 
color: #000000; 
} 


#upload { 

margin: auto; 
text-align: center; 

} 

a:link { 
color: #3757A3; 
} 

</style> 


</head> 

<body> 

<div id="container"> 

    <div id="header"><img src="images/crown1.png" width="108" height="77" alt=""/><br><br> 
    <p>Databse</p> 
</div> 



<div id="content"> 
<br><br>  


<table width="600px" border="2" cellpadding="15" cellspacing="5"> 
    <tbody> 
    <tr> 
    <th style="font-size: medium" scope="col"><div align="center">SCREENSHOT</div></th> 
    <th style="font-size: medium" scope="col">#</th> 
     <th style="font-size: medium" scope="col">TEXT FILE</th> 
    </tr> 
<tr> 
    <th width="111" style="font-size: medium" scope="col"><div align="center"><img src="images/b0.png" width="200" height="113" alt=""/></div> </th> 
    <th width="8" style="font-size: medium" scope="col">1</th> 
    <th width="79" style="font-size: medium" scope="col"><a href="http://futios.net/sample.txt">sample.txt</a></th> 
    </tr> 
</tbody> 
</table> 

     <br><br> <br> 
      &lt;<br> <br><br> 


<div id="upload"><form action="upload.php" method="post" enctype="multipart/form-data"> 
Select image to upload: 
    <input type="file" name="fileToUpload" id="fileToUpload"> 
    <input type="submit" value="Upload Image" name="submit"> 

<br><br> 

Type #: 
<input type="text" size="100"> 

<br><br> 

    Insert text here: 
<input type="text" size="100"> 


    </form> 

</div> 

     <br><br><br> 


    </div> 

     <div id="footer"> 
      <p>Footer</p> 
    </div> 
</div> 

</body> 
</html> 

非常感謝你。

+0

你想保存數據嗎? –

+0

如果您不需要存儲結果,則可以在客戶端上執行此操作:http://stackoverflow.com/questions/3665115/create-a-file-in-memory-for-user-to-download-not通過服務器 – tragle

+0

@Dagon [永遠和永遠,*阿門*](http://www.youtube.com/watch?v=sgJXbIP83A8) –

回答

0

你將需要使用mySQL和PHP來做到這一點。 PHP是服務器端腳本,mySQL是數據庫管理。你可以使用jQuery Ajax,但是你將需要某種數據庫來完成你之後的事情。

編輯:忘記指定,如果你想永遠它需要在某種數據庫。

+0

謝謝你的解釋! –

+1

不客氣。 – DC319