[解決済み] PHPサイト（Bootstrap）のIMGBBにAJAX＋Javascriptで画像アップロード

質問

現在、私のウェブサイトに画像のURLを入力させる簡単なフォームがあります（他の場所でホストされている）。

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

現在、サードパーティ（ImgBB）を使用して画像アップロード機能を統合したいのですが、ユーザーが手動で画像を別の場所にホストしたい場合に備えて、テキストフィールドを維持する必要があります。

別の 回答 しかし、私のブートストラップウェブサイトでそれを動作させることができません。

HTMLです。

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

ジャバスクリプトです。

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のコードは1つのIDにしか適用されないようです。JSコードを重複させることなく、複数のIDで動作させることは可能でしょうか？

解決方法は？

console.log(jx.data.url); が正しいURLを返しているように見えますが？

( https://i.ibb.co/309yRm8/24.jpg )

次のステップは、この url を Form Input Element に "paste" することですが、これは例えば vanilla JS や jQuery で行うことができます。

$('input[name="food_img"]').val(jx.data.url);

この文字列をコンソールログの後に試し、次に "inspect" でフォームが正しく "completed" されているかどうかを確認します。

ベスト、スミス