2016-11-01 3 views
-4

Могу ли я отправить файл через java-скрипт на веб-службу в asp.net? Если да, как отправить этот файл? Нужно преобразовать файл в массив байтов ...? это мой код отправить файл через JavaScript? Смотрите мой код нижеКак отправить файл в webservice через javascript?

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadData.aspx.cs" Inherits="FileUploadWebService.UploadData" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 

</head> 
<body> 
    <form id="form1" runat="server"> 
     <div> 
      Id: 
      <asp:TextBox ID="txtId" runat="server"></asp:TextBox><br /> 

      File: 
      <asp:FileUpload ID="FileUpload1" runat="server" /><br /> 
        <asp:HiddenField ID="HiddenField1" runat="Server"/> 
      <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="Button1_Click" /> 



     </div> 
    </form> 
</body> 

это мой script.i получил байты в боевой готовности, но WebService не называют .... в браузере только получили исключение

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript"> 
    var id = document.getElementById("txtId").value; 
    var byteArrays = []; 
    function getFile() { 
     debugger; 


     var data = document.getElementById("FileUpload1"); 
     // var file = $("#objFile")[0].files[0]; 
     var file = data.files[0]; 
     fr = new FileReader(); 
     fr.onload = receivedText; 
     //fr.readAsText(file); 
     fr.readAsDataURL(file); 
    } 

    function receivedText() { 
     var b64Data = fr.result.split(','); 
     var contentType = 'image/jpeg'; 
     //document.getElementById('editor').appendChild(document.createTextNode(fr.result)) 
     var byteCharacters = atob(b64Data[1]); 
     var byteNumbers = Array.prototype.map.call(byteCharacters, 
             charCodeFromCharacter); 
     var uint8Data = new Uint8Array(byteNumbers); 
     var blob = b64toBlob(b64Data[1], contentType); 
     //var blobUrl = URL.createObjectURL(blob); 
    } 

    function charCodeFromCharacter(c) { 
     return c.charCodeAt(0); 
    } 

    function b64toBlob(b64Data, contentType, sliceSize) { 
     contentType = contentType || ''; 
     sliceSize = sliceSize || 1024; 
     var byteCharacters = atob(b64Data); 


     for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) { 
      var slice = byteCharacters.slice(offset, offset + sliceSize); 
      var byteNumbers = Array.prototype.map.call(slice, charCodeFromCharacter); 
      var byteArray = new Uint8Array(byteNumbers); 
      byteArrays.push(byteArray); 
      for (var i = 0; i < byteArray.length; i++) { 
       alert(byteArray[i]); 
      } 

     } 

     $.ajax({ 
      url: "http://localhost:51963/FileUploadService.asmx/ServiceForFileUpLoad", 
      data: { ID: id, Data: file }, 
      contentType: "application/json; charset=utf-8", 
      type: "GET", 
      success: function (data) { 
       alert(data); 
      }, 
      error: function (x, y, z) { 
       alert(x.responseText + " " + x.status); 
      } 
     }); 
    } 


</script> 
</html> 

это мой код услуги

[webmethod] 
    public string UploadDataService(int id, byte[] bytes) 
      { 
       return "sucess"; 
      } 
+0

Есть многочисленные примеры на StackOverflow. Вы пробовали поиск в Google или даже искали StackOverflow? –

+1

Возможный дубликат [как отправить загруженный файл с javascript на контроллер в MVC?] (Http://stackoverflow.com/questions/18996968/how-to-send-uploaded-file-from-javascript-to-controller-in -mvc) – Aidin

+0

Спасибо за ваш ответ. Я попробовал.I преобразовал файл в байты ., посылая байты в webservice, получая исключение тайминга. –

ответ

-1

Я понятия не имею, почему вы читаете файл как dataURL, а затем воссоздать файл, но как кляксы ... бессмысленно

  • Использование многочастной формы загрузка при загрузке файлов в комплекте с настраиваемыми полями
  • Не читать его как dataURL и отправить все как объект JSON. файл будет ~ 3 раза больше для загрузки, а также требуется время для компиляции/декомпиляции
  • Отправка данных формы с помощью jQuery никогда не бывает легкой (see how), поэтому я предпочитаю новую выборку api, что + она обещает, так что вы можно использовать асинхра/жду

window.upload = async function(evt) { 
 
    evt.preventDefault() 
 
    
 
    let form1 = document.getElementById('form1') 
 
    let body = new FormData(form1) 
 
    let opts = { 
 
    method: 'post', 
 
    body 
 
    } 
 
    
 
    let res = await fetch('https://httpbin.org/post', opts) 
 
    let json = await res.json() 
 
    console.log(json) 
 
}
<form id="form1"> 
 
    <input name="id" value="2"> 
 
    <input name="txt" type="file"> 
 
    <input type="submit" onclick="upload(event)"> 
 
</form>

Смежные вопросы