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

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

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