使用 JavaScript 从 url 图像上传 HTML 表单文件答案

【问题标题】：HTML form upload file from url image using JavaScript使用 JavaScript 从 url 图像上传 HTML 表单文件
【发布时间】：2020-03-24 17:08:00
【问题描述】：

一些背景信息：

用户可以通过 HTML 格式输入一些书籍信息和上传书籍封面图片文件。在他们手动输入信息之前，他们可以使用 Google Book API 查找一些信息，只需单击一个按钮，一些字段就会使用来自 Google Book API 的信息自动填充。对于书籍封面图片，Google API 返回图片 url，所以我正在尝试找到一种方法将此 url 传输到文件对象。因此，当用户点击按钮使用来自 Google API 的信息填写表单时，图像将自动从图像 url 上传到那里。

我有一个图片网址，例如：http://books.google.com/books/content?id=L2byvgEACAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api

我创建了一个 HTML 表单，允许用户上传他们的图片。

<div class="form-group">
        <label for="book cover">Book Cover</label>
        <input type="file" class="form-control" name="book cover" accept="image/*" required>
    </div>

现在我想使用 JavaScript 将图像 url 传输到文件对象，然后为某些用户预填充此文件输入。

如何使用 JavaScript 实现这一点？谢谢！

【问题讨论】：

你的目的是什么？如果要将图像保存到自己的服务器，则可以直接在服务器上下载图像。
你能解释一下“为某些用户预填充此文件输入”是什么意思谢谢。
用户可以通过HTML表单输入一些书籍信息和上传书籍封面图片文件。在他们手动输入信息之前，他们可以使用 Google Book API 查找一些信息，只需单击一个按钮，一些字段就会使用来自 Google Book API 的信息自动填充。对于书籍封面图片，Google API 返回图片 url，所以我正在尝试找到一种方法将此 url 传输到文件对象。因此，当用户点击按钮使用来自 Google API 的信息填写表单时，图片将自动从图片 url 上传到那里。
你使用 PHP 作为后端吗？
没有。我是编码新手，所以我不熟悉 PHP。但如果这可行，我很乐意尝试

标签： javascript html forms image

【解决方案1】：

对于您的情况，我认为您必须保存链接以隐藏输入并提交到服务器端以获取该图像。如果您想为用户显示预览，只需在您的表单上创建一个<img src=" http://books.google.com/books/content?id=L2byvgEACAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api" />。

隐藏输入以防止用户访问链接：

<input type="hidden" name="image-url" value="http://books.google.com/books/content?id=L2byvgEACAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api">

<img src="http://books.google.com/books/content?id=L2byvgEACAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api"/>

然后，您必须采取行动在您的服务器端下载此图像。

【讨论】：

【解决方案2】：

请使用以下代码使其工作：

功能

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#imgInp").change(function() {
  readURL(this);
});

HTML 表单视图

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form runat="server">
  <input type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>

【讨论】：