javascript - HTML表单使用JavaScript从url图像上传文件

Question

一些背景信息:

用户可以通过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 实现此目的？谢谢!

Answer 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"/>

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