Wie Webform mit Datei zu Webmethod mit Jquery/Ajax zu buchen?

Question

Ist das überhaupt möglich? Ich habe ein Webformular mit bestimmten Textfeldern usw. und einem Datei-Upload-Element. Ich versuche, die Daten mit der Methode .ajax() an webmethod zu senden. Es scheint mir, dass es nicht möglich ist, Dateiinhalte auf diese Weise an die Webmethode zu senden. Ich bin nicht einmal in der Lage, die Webmethode zu treffen.

script type="text/javascript"> 
    var btn; 
    var span; 
    $(document).ready(function (e) { 

     $('#btnsave').on('click', function (event) { 

      Submit(); 
      event.preventDefault(); 
     }); 
    }) 

    function Submit() { 

     $.ajax({ 
      type: "POST", 
      url: "SupplierMst.aspx/RegisterSupplier", 
      data: "{'file' : " + btoa(document.getElementById("myFile").value) + ",'biddername':" + document.getElementById("txtsuppliername").value + "}", 
      async: true, 
      contentType: "application/json; charset=utf-8", 
      success: function (data, status) { 
       console.log("CallWM"); 
       alert(data.d); 
      }, 
      failure: function (data) { 
       alert(data.d); 
      }, 
      error: function (data) { 
       alert(data.d); 
      } 
     }); 

    } 
    </script> 

HTML:

<input id="txtsuppliername" type="text" /><br /> 
<input type="file" id="myFile"> 

-Code hinter:

[WebMethod] 
public static string RegisterSupplier(string file, string biddername) 
{ 
    // break point not hit 

    return "a"; 
} 

Ich versuche nun schon seit Stunden Lösung dieses Problems zu finden. Niemand scheint mir dabei helfen zu können. Ist das mit diesem Ansatz überhaupt möglich? Wenn nicht, wie mache ich das? Jemand schlug vor, dass ich versuchen sollte, ein vollständiges Formular vorzulegen, anstatt einzelne Werte zu übergeben.

Answer 1

Dies kann ohne Bibliothek durchgeführt werden, indem Sie JavaScript FileReader API verwenden. Damit kann modern browsers den Inhalt der Datei mit JavaScript lesen, nachdem er vom Benutzer ausgewählt wurde, und Sie können dann wie gewohnt fortfahren (indem Sie es als Zeichenfolge codieren und an den Server senden).

würde der Code wie folgt sein (die oben als Referenz):

// NEW CODE 
 
// set up the FileReader and the variable that will hold the file's content 
 
var reader = new FileReader(); 
 
var fileContent = ""; 
 

 
// when the file is passed to the FileReader, store its content in a variable 
 
reader.onload = function(e) { 
 
    fileContent = reader.result; 
 
    
 
    // for testing purposes, show content of the file on console 
 
    console.log("The file content is: " + fileContent); 
 
} 
 

 
// Read the content of the file each time that the user selects one 
 
document.getElementById("myFile").addEventListener("change", function(e) { 
 
    var selectedFile = document.getElementById('myFile').files[0]; 
 
    reader.readAsText(selectedFile); 
 
}) 
 
// END NEW CODE 
 

 
var btn; 
 
var span; 
 

 
$(document).ready(function (e) { 
 
    $('#btnsave').on('click', function (event) { 
 
    Submit(); 
 
    event.preventDefault(); 
 
    }); 
 
}) 
 

 
function Submit() { 
 

 
    $.ajax({ 
 
    type: "POST", 
 
    url: "SupplierMst.aspx/RegisterSupplier", 
 
    // changed this line too! 
 
    data: { 
 
       'file': btoa(fileContent), 
 
       'biddername': document.getElementById("txtsuppliername").value 
 
      }, 
 
    async: true, 
 
    contentType: "application/json; charset=utf-8", 
 
    success: function (data, status) { 
 
     console.log("CallWM"); 
 
     alert(data.d); 
 
    }, 
 
    failure: function (data) { 
 
     alert(data.d); 
 
    }, 
 
    error: function (data) { 
 
     alert(data.d); 
 
    } 
 
    }); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input id="txtsuppliername" type="text" /><br /> 
 
<input type="file" id="myFile">

Sie den Code oben ausführen können, wählen Sie eine Datei (für eine einfache Textdatei verwenden testen, damit es lesbar ist), und überprüfen Sie die Konsole, um ihren Inhalt zu sehen. Dann wäre der Rest des Codes derselbe (Ich habe eine kleine Änderung vorgenommen, um die Parameter im AJAX-Aufruf zu korrigieren).

Beachten Sie, dass das Senden der Datei wie folgt Grenzen hat: Wenn Sie die GET-Methode verwenden, haben Sie eine kürzere Parametergröße, und mit POST hängt es von den Servereinstellungen ab ... aber ich denke, dass Sie hatten diese Grenzen sogar für eine Datei.

Answer 2

Zuerst gehen Sie zu App_Start >> RouteConfig.cs >> settings.AutoRedirectMode = RedirectMode.Off; und dann ersetzen Sie einfach Ihre Funktion von meinem Code wird es auf jeden Fall für Sie arbeiten, Good Luck ..

function Submit() { 
    $.ajax({ 
     type: "POST", 
     url: "UploadImage.aspx/RegisterSupplier", 
     data: "{'file' : " + JSON.stringify(document.getElementById("myFile").value) + ",'biddername':" + JSON.stringify(document.getElementById("txtsuppliername").value) + "}", 
     async: true, 
     contentType: "application/json; charset=utf-8", 
     success: function (data, status) { 
      console.log("CallWM"); 
      alert(data.d); 
     }, 
     failure: function (data) { 
      alert(data.d); 
     }, 
     error: function (data) { 
      alert(data.d); 
     } 
    });