如何将图像文件以及JavaScript变量的值上传到服务器和数据库

How do I upload an image file to server and database, along with the values of JavaScript variables?

本文关键字：服务器 数据库 变量 图像 文件 JavaScript      更新时间：2024-04-29

我有一个HTML form，用于上传图像和回答调查问题。我想让它在我选择图像后，表单内容变为第一个问题，然后在我回答后，内容变为第二个问题，等等。

现在，我已经将答案保存在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"、"C"、"D"。每个都在<p>标签（例如<p class="answerswer">a</p>）中。

我的服务器端数据库有列image_path、text_name和second_question。第二项text_name是用户在<input type="text" name="text_name" />中键入的文本。

如何让用户向数据库发送包含image_path、text_name和second_question数据的行？

您通常必须通过另一种可以将文件写入服务器的语言（如PHP）来传递文件数据。有很多预制库可以实现这一点，无需重新发明轮子。

我发现最开放和有用的是这个演示和它的源代码。

相关文章：