< コード例 >

HTML

        <form id="photoupload_uploadform" enctype=”multipart/form-data”>
          <table>
            <tr>
              <td valign="top" class="td_title">Book ID</td>
              <td valign="top" class="td_input"><span id="photoupload_bookid"></td>
            </tr>
            
            <!--
            <tr>
              <td valign="top" class="td_title">Dep date</td>
              <td valign="top" class="td_input"><input id="photoinp_depdate" type="text" size="10" max="10" value=""></td>
            </tr>
            <tr>
              <td valign="top" class="td_title">Flight No.</td>
              <td valign="top" class="td_input"><input id="photoinp_flnum" type="text" size=12" max="12" value=""></td>
              </td> 
            </tr>
            -->

            <tr>
              <td valign="top" class="td_title">Reg No.</td>
              <td valign="top" class="td_input"><input id="photoinp_regno" type="text" size="12" max="12" value=""></td>
            </tr>

            <tr>
              <td valign="top" class="td_title">Airport</td>
              <td valign="top" class="td_input">
                <select id="photoupload_iatasel">
                  <option id="iatasel_from" value="from" selected></option>
                  <option id="iatasel_to" value="to"></option>
                </select>
                
                <span id="selapname" class="ml-1">..</span>
              </td>
               
            </tr>

            <tr>
              <td valign="top" class="td_title">Publish</td>
              <td valign="top" class="td_input">
                <select id="photoupload_publishsel">
                  <option value="yes" selected>Yes</option>
                  <option value="no">No</option>
                </select>
              </td>
              </td> 
            </tr>



            <tr>
              <td valign="top" class="td_title">Select</td>
              <td class="td_input" valign="top">
                <input id="photoupload_fileinput" type="file" accept="image/*" id="userfile" name="userfile">
              </td>  
            </tr>  

          </table>
        </form>  

Javascript

      // ここに確認を入れる //

      $("#marker_loading_booklist").removeClass("dsp_none")
      $("#marker_loading_booklist").show()
      
      // フォームの値を連想配列に入れる //
      const array = {
        userid: userid,
        bookid: $("#photoupload_bookid").text(),
        depdate: $("#photoinp_depdate").val(),
        flnum: $("#photoinp_flnum").val(),
        regno: $("#photoinp_regno").val(),
        airport: $("#photoupload_iatasel").val(),
        publish: $("#photoupload_publishsel").val()
      }

      const fd = new FormData($('#photoupload_uploadform').get(0));
      fd.append('json', JSON.stringify(array));

      // Fetch API //
      fetch("upload/UploadAPhoto.php",
              {
                method: "POST", body: fd
              }
      )
              // ** 応答時 ** //　
              .then((data) => data.text())
              // ** 応答後 ** //
              .then((res) => {


                $("#marker_loading_booklist").addClass("dsp_none")
                $("#marker_loading_booklist").hide()
                
                const array = JSON.parse(res)
                // 正常完了の場合 //
                if (array["result"] === "Success") {
                  toastr.success("Photo upload was completed")
                }
                // エラーの場合 //
                else {
                  toastr.error("Photo upload was FAILED.")
                }
                
                // 写真表示更新 //
                new BookListUserPhoto(rowdataThis).showPhoto()

              })


    })