Question

我正在尝试制作一个包含3个输入的表单：

图片（文件）上传
第一个文字字段
第二个文本字段（将输入的文本另存为.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>

非常感谢。

文件上传和数据（文本）表格形成HTML表格

0 个答案: