如何使用fileuploader通過Ajax保存圖像

Question

我有一個員工添加Aspform。它包含關於員工與他的形象的所有細節。現在所有數據都使用Ajax和Webmethod保存。但圖片上傳不起作用。所有其他信息都通過一個數組 傳遞給Webmethod。

我有一個文件上傳器按鈕和圖像預覽縮略圖。但我不知道如何保存圖像，需要的列是什麼，如何獲取圖像路徑，如何將上傳的圖像傳輸到我們項目的文件夾以及如何將圖像重命名爲employeeId。

我的代碼是波紋管

<div class="col-sm-2"> 
             <div class="fileinput fileinput-new" data-provides="fileinput"> 
              <div id="mypic" class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 84px; height: 84px;"> 
               <img id="img1" src="img/DummyImg.png" alt=""> 
              </div> 
              <div> 
               <span class="profile_pic_btn_wrap"> 
                <input type="file" onchange="readQuestURL(this);" name="profile_pic_file" class="profile_pic_file" /> 
                <span class="profile_pic_btn">Select Image</span> 
               </span> 
              </div> 
             </div>         
            </div> 




      $.ajax({ 

       type: "POST", 
       dataType: "json", 
       contentType: "application/json", 
       url: "staffinfo.aspx/SaveStaffInfo", 
       data: JSON.stringify({ edit: edit, arr: arr, superioremployee: superioremployee }), 
       success: function (msg) { 
        if (msg.d != "") { 
         var x = msg.d; 
         x = x.split(","); 
         document.getElementById('hdnStaffId').value = x[1]; 
         alert(x[0]); 
         EmployeeCount(); 
        } 

       }, 
       error: function (msg) { 
        alert(msg.d); 
       } 
      }); 

Answer 1

插入股利的形式與ID form_file

$(function() { 
       $('#form_file').on('submit', function (e) { 
        e.preventDefault(); 
        var formData = new FormData(this); 
        $.ajax({ 
    //     cache: false, 
         type: "POST", 
         // dataType: "json", 
         processData: false, 
         contentType: false, 
         url: "staffinfo.aspx/SaveStaffInfo", 
         data: formData, 
         success: function (response) { 
          if (msg.d != "") { 
          var x = msg.d; 
          x = x.split(","); 
          document.getElementById('hdnStaffId').value = x[1]; 
          alert(x[0]); 
          EmployeeCount(); 
         } 
         }, 
         error: function() { 
          alert('SYSTEM ERROR, TRY LATER AGAIN'); 
         } 
        }); 
       }); 
      });