Wie verwende ich ein einzelnes HTML-Formular, um ein Bild hochzuladen und seine Details mit einer einzigen Schaltfläche zum Senden zu speichern?

Question

Vor allem hier ist mein Code:

<form id="registration_form" action="AddProductServlet" method="post"> 
      <div> 
      <label> 
        <input placeholder="Product ID" name="pid" type="text"> 
       </label> 
      </div> 
      <div> 
       <label> 
        <input placeholder="Product Name" name="pname" type="text"> 
       </label> 
      </div> 
      <div> 

     <h3> Choose Image to Upload </h3> 

     <form action="upload" method="post" enctype="multipart/form-data"> 

      <input type="file" name="file" /> 

      <input type="submit" value="Add Product" /> 

     </form>   
     </div> 
     </form> 

Wie ich hier getan haben, ein Formular-Tag in einem Formular-Tag aufweist, ist ungültig.

Auch da ist es nicht möglich, die zwei verschiedenen Aktionen innerhalb des gleichen Form-Tags aufzurufen.

Also gibt es eine Möglichkeit, ich kann sowohl das Bild auf mein lokales Laufwerk hochladen und auch die Produktdetails und den Bildnamen in der Datenbank für den späteren Abruf gespeichert werden?

Answer 1

Sie können wenige Eingaben in einem Formular verarbeiten. Versuchen Sie etwas wie:

<form action="upload" method="post" enctype="multipart/form-data"> 
    <input type="file" name="file" /> <br/> 
    Product ID: <input type="text" name="pid"> <br/> 
    Product Name: <input type="text" name="pname"> <br/> 
    <input type="submit" value="Add Product" /> 
</form>