2012-04-03 8 views
10

के साथ एक फ़ाइल अपलोड करें मैं क्लाइंट से सर्वर तक एक फ़ाइल अपलोड करना चाहते हैं। क्या सिग्नलआर के साथ फाइल अपलोड करने का कोई तरीका है या मुझे इसके लिए नियंत्रक की आवश्यकता है?ASP.NET MVC - SignalR

+1

तुम क्यों SignalR इस के लिए के बजाय सिर्फ एक HttpPost एक नियंत्रक करने के लिए प्रयोग करेंगे? – drch

उत्तर

20

SignalR वास्तविक समय फ़ाइलों को अपलोड नहीं संदेश भेजने के लिए है।

+2

मैं एक धारा जो सर्वर साइड पर एक घटक है कि एक बड़ी फ़ाइल है, जहां ग्राहक एक ब्राउज़र जो जे एस फ़ाइल एपीआई है में तलाश करने की क्षमता के लिए आवश्यक करने के लिए पारित किया जा सकता है निर्माण करना चाहता था मान लें। अर्द्ध प्रदर्शन करने वाले फैशन में इसे लागू करने के लिए मैं क्या उपयोग करूंगा? – ehdv

+0

एक वेबपी एंडपॉइंट पर एक स्ट्रीमिंग पोस्ट इसके लिए ठीक काम करेगा। वास्तव में, यह रीयलटाइम में सर्वर साइड प्रसंस्करण स्थिति के संबंध में पुश घटनाओं को ट्रिगर करने के दौरान भी हो सकता है अगर यह स्ट्रीम का निरीक्षण करते समय ग्राहक को धक्का देने के लिए आपके केंद्र को अधिसूचित करता है। – Bon

1

इस फ़ाइल अपलोड फ़ाइल इनपुट बूटस्ट्रैप प्लगइन (krajee) का उपयोग कर आप भी इस प्लगइन का उपयोग किए बिना फाइल को अपलोड कर सकते हैं।

@section Page{ 

    <script src="~/Scripts/bootstrap-switch.min.js"></script> 
    <script src="~/Scripts/Uploader/fileinput.js"></script> 
    <link href="~/Scripts/Uploader/fileinput.css" rel="stylesheet" /> 
    <script> 
     var itemHub = $.connection.ItemHub; 
    $(document).ready(function() { 
     $.connection.hub.start().done(function() { 

      //do any thing 

     }); 
     $("#fileinput").fileinput({ 
      allowedFileExtensions: ["jpg", "png", "gif", "jpeg"], 
      maxImageWidth: 700, 
      maxImageHeight: 700, 
      resizePreference: 'height', 
      maxFileCount: 1, 
      resizeImage: true 
     }); 


     $("#fileinput").on('fileloaded', function (event, file, previewId, index, reader) { 


      var readers = new FileReader(); 
      readers.onloadend = function() { 
       $(".file-preview-image").attr('src', readers.result); 
      } 
      readers.readAsDataURL(file); 
     }); 




     $('#btnSave').click(function() { 
      var imagesJson = $('.file-preview-image').map(function() { 
       var $this = $(this); 
       return { 
        image: $this.attr('src'), 
        filename: $this.attr('data-filename') 
       }; 
      }).toArray(); 

      itemHub.server.getByteArray(imagesJson); 
     }); 
    }); 

    </script> 
    } 

हब वर्ग कोड

[HubName("ItemHub")] 
    public class ItemHub : Hub 
    { 
      public void GetByteArray(IEnumerable<ImageData> images) 
      { 
      foreach (var item in images ?? Enumerable.Empty<ImageData>()) 
      { 
       var tokens = item.Image.Split(','); 
       if (tokens.Length > 1) 
       { 
        byte[] buffer = Convert.FromBase64String(tokens[1]); 

       } 
       } 
      } 
    } 

    public class ImageData 
    { 
     public string Description { get; set; } 
     public string Filename { get; set; } 
     public string Image { get; set; } 
    }