duangou1933
2015-09-19 01:37
浏览 37

文件上传和数据(文本)表格形成HTML表格[关闭]

I`m trying to make a form that has 3 inputs:

  • image (file) upload
  • 1st text field
  • 2nd text field (that saves entered text as .txt file and displays a link in the third column)

After entering all 3 inputs, I would like to add the data into existing html table as an additional row.

Could you please suggest where should I start? Do I need to use mySQL in order to accomplish this? Or I can only use PHP and jQuery?

Here is the link to my page: 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>

Thank you very much.

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dongpo8250 2015-09-19 01:47
    已采纳

    You're going to need to use mySQL and PHP to do it. PHP is server side scripting and mySQL is database management. You could use jQuery Ajax, but you are going to need some kind of database to accomplish what you're after.

    Edit: Forgot to specify if you want it forever it needs to be in some kind of database.

    打赏 评论

相关推荐 更多相似问题