javascript - 使用JavaScript从网址图片上传HTML表单文件(HTML form upload file from url image using JavaScript)

Question

Some background information:

(一些背景信息：)

Users are able to input some book information and upload book cover image file through HTML form.

(用户可以输入一些书籍信息并通过HTML表单上传书籍封面图像文件。)

Before they input information manually, they could use Google Book API to find some information, and by just click a button, some fields will be automatically filled using the information from Google Book API.

(在他们手动输入信息之前，他们可以使用Google Book API查找一些信息，只需单击一个按钮，就会使用Google Book API中的信息自动填充某些字段。)

For book cover image, Google API returns the image url, so I am trying find a way to transfer this url to a file object.

(对于书籍封面图片，Google API返回图片网址，因此，我试图找到一种方法将该网址传输到文件对象。)

Therefore, when users click the button to fill form using information from Google API, the image will be automatically uploaded there from image url.

(因此，当用户单击按钮以使用来自Google API的信息来填写表格时，图像将从图像URL自动上载到那里。)

I have an image url such as: http://books.google.com/books/content?id=L2byvgEACAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api

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

And I created an HTML form that allows users to upload their images.

(我创建了一个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>

Now I want to use JavaScript to transfer the image url to a file object and then prefill this file input for some users.

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

How can I achieve this using JavaScript?

(如何使用JavaScript做到这一点？)

Thanks!

(谢谢！)

  ask by Julie Zhang translate from so

Answer 1

For your case, I think you must save the link to input hidden and submit to server side to get that image.

(对于您的情况，我认为您必须保存链接以隐藏输入并提交到服务器端以获取该图像。)

If you want to show the preview for user, just create a <img src=" http://books.google.com/books/content?id=L2byvgEACAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api" /> on your form.

(如果要向用户显示预览，只需在表单上创建<img src=" http://books.google.com/books/content?id=L2byvgEACAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api" /> 。)

Put hidden input to keep the link from user:

(放置隐藏的输入以保持用户的链接：)

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

And then, you have to take action download this image on your server side.

(然后，您必须采取措施将此映像下载到服务器端。)