目前，我有一个简单的表单，可以让用户将图像的URL（托管在其他地方）放在我的网站上：

<input type="text" name="food_img" class="form-control" placeholder="Enter Image URL">

字符串
现在，我想使用第三方（ImgBB）集成图像上传功能，维护文本字段，以防用户仍然希望在其他地方手动托管图像。
我已经找到了另一个answer与代码这样做，但我无法使它在我的引导网站上工作：
超文本标记语言：

<input type="text" name="food_img" class="form-control" placeholder="Enter Image URL">
            <input type="file" id="input_img" onchange="fileChange()" accept="image/*">

型
JavaScript：

function fileChange(){
        var file = document.getElementById('input_img');
        var form = new FormData();
        form.append("image", file.files[0])

        var settings = {
          "url": "https://api.imgbb.com/1/upload?key=8d5867a9512390fb5e5dc97839aa36f6",
          "method": "POST",
          "timeout": 0,
          "processData": false,
          "mimeType": "multipart/form-data",
          "contentType": false,
          "data": form
        };

        $.ajax(settings).done(function (response) {
          console.log(response);
          var jx = JSON.parse(response);
          console.log(jx.data.url);
        });
        }

型
通过上面的代码，我可以在浏览器控制台上看到图像被正确上传到服务：

Empty string passed to getElementById(). 2 file.html
{"data":{"id":"D7HDrf6","title":"24","url_viewer":"https:\/\/ibb.co\/D7HDrf6","url":"https:\/\/i.ibb.co\/309yRm8\/24.jpg","display_url":"https:\/\/i.ibb.co\/309yRm8\/24.jpg","size":66579,"time":"1614194220","expiration":"0","image":{"filename":"24.jpg","name":"24","mime":"image\/jpeg","extension":"jpg","url":"https:\/\/i.ibb.co\/309yRm8\/24.jpg"},"thumb":{"filename":"24.jpg","name":"24","mime":"image\/jpeg","extension":"jpg","url":"https:\/\/i.ibb.co\/D7HDrf6\/24.jpg"},"delete_url":"https:\/\/ibb.co\/D7HDrf6\/71f82327d25ce6fa7447aeb72ca8065b"},"success":true,"status":200} file.html:77:11
https://i.ibb.co/309yRm8/24.jpg

型
但是我无法“粘贴”图像URL到相应的字段，在提交表单之前.此外，我试图使这一工作在同一个表单上的几个字段（以便用户可以把，例如，页脚，页眉和个人资料图片），但我看到JavaScript代码只适用于一个ID.有没有可能使它在多个ID上工作而不重复JS代码？