如何將圖像文件上傳到服務器和數據庫，以及JavaScript變量的值？

我有一個HTML form上傳圖像和回答調查問題。我想使它在我選擇圖像之後，表單內容變成第一個問題，然後在我回答內容成爲第二個問題之後，等等。如何將圖像文件上傳到服務器和數據庫，以及JavaScript變量的值？

現在，我已將答案保存在JavaScript變量，但我不知道如何將這些變量和圖像發送到服務器端數據庫。

這是我的layout.erb文件，其中包含form。 JavaScript的這個片段只是用於預覽上傳的圖片：

<form action="upload_image" method="post" enctype="multipart/form-data" accept-charset="utf-8"> 
<div class="form_item"> 
    <p class="question"> 
    <img id="upload_preview" style="width: 200px; height: 200px;" /> 
    <input id="upload_image" type="file" name="my_photo" onchange="PreviewImage();" /> 
    <script type="text/javascript"> 
     function PreviewImage() { 
      var oFReader = new FileReader(); 
      oFReader.readAsDataURL(document.getElementById("upload_image").files[0]); 

      oFReader.onload = function (oFREvent) { 
       document.getElementById("upload_preview").src = oFREvent.target.result; 
       // document.getElementById("upload_image").disabled = true 
      }; // DONE: function (oFREvent) 
     }; // DONE: function PreviewImage() 
    </script> 
    </p> 
    <p class="question">Enter name here<input type="text" name="text_name" /></p> 
    <button type="button" id="next_question">Next</button> 
</div> 
</form>

當我點擊下一步按鈕，p.question切換到第二個問題，它有選擇「A」，「B」的內容，」光盤'。每個標籤都在<p>標籤中（例如，<p class="answer">a</p>）。

我的服務器端數據庫的列有image_path,text_name和second_question。第二項text_name是用戶輸入<input type="text" name="text_name" />的文本。

如何讓用戶可以向數據庫發送一行包含image_path,text_name和second_question數據的行？

來源

2013-12-09 Username

您通常必須通過可以將文件寫入服務器的另一種語言（例如PHP）傳遞文件數據。這裏有很多預製庫，不需要重新發明輪子。

我發現最開放最有用的是this demo and its source。

來源

2013-12-09 00:10:05 Coder101101010

這有點幫助，雖然我試圖找出是如何發送圖像，以及用戶點擊'text_name'和'second_question'。 – Username

我想我不明白？該庫**不會**將實際的圖像文件上傳到服務器。然後，您可以使用上傳的地址將其加載到頁面，或以其他方式對其進行操作。如果您想要與圖像同時發送其他參數，則可能需要稍微修改上傳庫或找到觸發回調函數的方法。 – Coder101101010

如何將圖像文件上傳到服務器和數據庫，以及JavaScript變量的值？

回答

相關問題