ASP.NET/C# के साथ Plupload का उपयोग करना




jquery-plugins httphandler (2)

यहाँ pluploader के लिए एक ashx फ़ाइल का VB उदाहरण है।

@@ डारिन दिमित्रोव का धन्यवाद जिन्होंने यह सुझाव दिया। इसका सबसे अच्छा समाधान है, जैसे सिल्वरलाइट, फ्लैश .. इत्यादि कई गिरावट के साथ इसका मेगा।

मुझे कोई वीबी उदाहरण नहीं मिला इसलिए मैंने इसे अपने आत्म-परीक्षण और कार्यों में बदल दिया! झूमने के साथ!

VisualStudio में अपनी वेबसाइट पर एक ashx फ़ाइल जोड़ने के लिए। वेबसाइट पर राइट क्लिक करें

वेबसाइट> नया आइटम जोड़ें> सामान्य हैंडलर

यह सब एक पृष्ठ में पीछे कोड की कोई आवश्यकता नहीं है। बस इसे pluplaod प्लगइन से कॉल करें

<%@ WebHandler Language="VB" Class="upload" %>

Imports System
Imports System.IO
Imports System.Web


Public Class upload : Implements IHttpHandler


    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        Dim chunk As Integer = If(context.Request("chunk") IsNot Nothing, Integer.Parse(context.Request("chunk")), 0)
        Dim fileName As String = If(context.Request("name") IsNot Nothing, context.Request("name"), String.Empty)

        Dim fileUpload As HttpPostedFile = context.Request.Files(0)

        Dim uploadPath = context.Server.MapPath("~/uploads")
        Using fs = New FileStream(Path.Combine(uploadPath, fileName), If(chunk = 0, FileMode.Create, FileMode.Append))
            Dim buffer = New Byte(fileUpload.InputStream.Length - 1) {}
            fileUpload.InputStream.Read(buffer, 0, buffer.Length)

            fs.Write(buffer, 0, buffer.Length)
        End Using

        context.Response.ContentType = "text/plain"
        context.Response.Write("Success")
    End Sub

    Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property

End Class

अद्यतन करें

मुझे सब कुछ ठीक से काम करने में सक्षम था और मैं सिर्फ अपडेटेड कोड के साथ वापस पोस्ट करना चाहता था। मैंने डारिन दिमित्रोव के सुझाव को फ़ाइल अपलोड को संभालने के लिए एक अलग जेनेरिक http हैंडलर का उपयोग करने के लिए इस्तेमाल किया और इसलिए यह वह कोड है जिसके लिए मैं आया था ... यदि आपके कोई प्रश्न हैं

<%@ WebHandler Language="C#" Class="Upload" %>

using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.IO;
using System.Net;
using System.Web;

public class Upload : IHttpHandler {

    public void ProcessRequest(HttpContext context) {

        /**
         * If 'newTicket' is "false", then the directory to upload to already exists and we can extract it from
         * the 'ticketID' POST parameter.
         * 
         * If 'newTicket' is "true", then this is a new Ticket submission so we need to work with a NEW directory 
         * on the server, so the ID needs to be 1 more than the total number of directories in ~/TicketUploads/
         */
        String newTicket = context.Request["newTicket"] != null ? context.Request["newTicket"] : String.Empty;
        int theID = -1;
        if (newTicket.Equals("true")) {

            // we need to calculate a new ID
            theID = getNewID(context); // calculate the new ID = # of rows
            theID++; // add 1 to make it unique
        } else if (newTicket.Equals("false")) {

            // we can just get the ID from the POST parameter
            theID = context.Request["ticketID"] != null ? Convert.ToInt32(context.Request["ticketID"]) : -1;
        } else {

            // something went wrong with the 'newTicket' POST parameter
            context.Response.ContentType = "text/plain";
            context.Response.Write("Error with 'newTicket' POST parameter.");
        }

        // if theID is negative, something went wrong... can't continue
        if (theID < 0) {
            return;
        }

        // ready to read the files being uploaded and upload them to the correct directory
        int chunk = context.Request["chunk"] != null ? int.Parse(context.Request["chunk"]) : 0;
        string fileName = context.Request["name"] != null ? context.Request["name"] : string.Empty;
        var uploadPath = context.Server.MapPath("~/TicketUploads/" + theID + "/");
        HttpPostedFile fileUpload = context.Request.Files[0];

        // if the NEW directory doesn't exist, create it
        DirectoryInfo di = new DirectoryInfo("" + uploadPath + "");
        if (!(di.Exists)) {
            di.Create();
        }

        using (var fs = new FileStream(Path.Combine(uploadPath, fileName), chunk == 0 ? FileMode.Create : FileMode.Append)) {
            var buffer = new byte[fileUpload.InputStream.Length];
            fileUpload.InputStream.Read(buffer, 0, buffer.Length);
            fs.Write(buffer, 0, buffer.Length);
        }

        context.Response.ContentType = "text/plain";
        context.Response.Write("File uploaded.");
        return;
    }
}

मैं सी # का उपयोग करके ASP.NET में Plupload फ़ाइल अपलोडर को एकीकृत करने की कोशिश कर रहा हूं। मैंने एंग्री बंदरों के लेख के साथ-साथ मार्को वाल्सेची ब्लॉग पोस्ट भी पढ़ा है लेकिन मैं थोड़ा खो गया हूं।

सी # जो उपरोक्त लेखों का सुझाव है, लगभग निम्नलिखित के समान है:

int chunk = Request.QueryString["chunk"] != null ? int.Parse(Request.QueryString["chunk"]) : 0;
string fileName = Request.QueryString["name"] != null ? Request.QueryString["name"] : string.Empty;

HttpPostedFile fileUpload = Request.Files[0];

using (FileStream fs = new FileStream(Server.MapPath("~/TicketUploads/" + fileName), chunk == 0 ? FileMode.Create : FileMode.Append))
{
    Byte[] buffer = new Byte[fileUpload.InputStream.Length];
    fileUpload.InputStream.Read(buffer, 0, buffer.Length);

    fs.Write(buffer, 0, buffer.Length);
    fs.Close();
}

सबसे पहले, मैंने इस प्रकार के रूप में Plupload विन्यास की स्थापना की है:

$("#plupload_container").pluploadQueue({
  runtimes: 'html5,gears,flash,silverlight,html4',
  flash_swf_url: '../plupload/js/plupload.flash.swf',
  silverlight_xap_url: '../plupload/js/plupload.silverlight.xap',
  filters: [
    { title: "Image files", extensions: "jpg,gif" },
    { title: "Zip files", extensions: "zip" },
    { title: "Document files", extensions: "doc,pdf,txt" }
  ]
});

... लेकिन मुझे लगता है कि मैं यहां कुछ याद कर रहा हूं जो काम करने के लिए अपलोड करने के लिए आवश्यक होगा।

मुझे लगता है कि मेरा मुख्य प्रश्न यह है कि मैं उपरोक्त C # कोड को कैसे कॉल करूं ताकि अपलोडिंग शुरू हो सके? मेरे पास SubmitRequest.aspx नामक पृष्ठ पर एक फ़ॉर्म है। निम्नलिखित में फ़ॉर्म परिणामों पर 'सबमिट' पर क्लिक करना:

$('form').submit(function (e) {

  // Validate number of uploaded files
  if (uploader.total.uploaded == 0) {
    // Files in queue upload them first
    if (uploader.files.length > 0) {
      // When all files are uploaded submit form
      uploader.bind('UploadProgress', function () {
        if (uploader.total.uploaded == uploader.files.length)
          $('form').submit();
      });
      uploader.start();
    }
    e.preventDefault();
  }
});

... इसलिए अपलोडर तब शुरू होता है जब 'सबमिट' पर क्लिक किया जाता है और फाइलें अपलोड की जाती हैं। एक बार ऐसा करने के बाद, शेष फॉर्म जमा हो जाता है। मुझे समझ में नहीं आता कि इस घटना को C # कोड से कैसे TicketUploads जो सर्वर पर एक फ़ोल्डर TicketUploads को अपलोड करने से TicketUploads

मैं लोंगिश पद के लिए माफी चाहता हूँ, लेकिन मैं किसी भी मदद की सराहना करेंगे :)


यहाँ एक पूर्ण कार्य उदाहरण मैंने आपके लिए लिखा है:

<%@ Page Title="Home Page" Language="C#" %>
<%@ Import Namespace="System.IO" %>
<script runat="server" type="text/c#">
    protected void Page_Load(object sender, EventArgs e)
    {
        // Check to see whether there are uploaded files to process them
        if (Request.Files.Count > 0)
        {
            int chunk = Request["chunk"] != null ? int.Parse(Request["chunk"]) : 0;
            string fileName = Request["name"] != null ? Request["name"] : string.Empty;

            HttpPostedFile fileUpload = Request.Files[0];

            var uploadPath = Server.MapPath("~/TicketUploads");
            using (var fs = new FileStream(Path.Combine(uploadPath, fileName), chunk == 0 ? FileMode.Create : FileMode.Append))
            {
                var buffer = new byte[fileUpload.InputStream.Length];
                fileUpload.InputStream.Read(buffer, 0, buffer.Length);

                fs.Write(buffer, 0, buffer.Length);
            }
        }
    }
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
    <title></title>

    <style type="text/css">@import url(css/plupload.queue.css);</style>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("jquery", "1.3");
    </script>
    <script type="text/javascript" src="/plupload/js/gears_init.js"></script>
    <script type="text/javascript" src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script>
    <script type="text/javascript" src="/plupload/js/plupload.full.min.js"></script>
    <script type="text/javascript" src="/plupload/js/jquery.plupload.queue.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $("#uploader").pluploadQueue({
            // General settings
            runtimes : 'gears,flash,silverlight,browserplus,html5',
            url : '/default.aspx',
            max_file_size : '10mb',
            chunk_size : '1mb',
            unique_names : true,
            // Resize images on clientside if we can
            resize : {width : 320, height : 240, quality : 90},
            // Specify what files to browse for
            filters : [
                {title : "Image files", extensions : "jpg,gif,png"},
                {title : "Zip files", extensions : "zip"}
            ],
            // Flash settings
            flash_swf_url : '/plupload/js/plupload.flash.swf',
            // Silverlight settings
            silverlight_xap_url : '/plupload/js/plupload.silverlight.xap'
        });

        // Client side form validation
        $('form').submit(function(e) {
            var uploader = $('#uploader').pluploadQueue();
            // Validate number of uploaded files
            if (uploader.total.uploaded == 0) {
                // Files in queue upload them first
                if (uploader.files.length > 0) {
                    // When all files are uploaded submit form
                    uploader.bind('UploadProgress', function() {
                        if (uploader.total.uploaded == uploader.files.length)
                            $('form').submit();
                    });
                    uploader.start();
                } else
                    alert('You must at least upload one file.');
                e.preventDefault();
            }
        });
    });
    </script>

</head>
<body>
    <form id="Form1" runat="server">
        <div id="uploader">
            <p>You browser doesn't have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.</p>
        </div>
    </form>
</body>
</html>

जैसा कि आप इस उदाहरण में देखेंगे कि फ़ाइलें default.aspx नामक एक ही पृष्ठ पर अपलोड की जाती हैं। ध्यान दें कि chunk और name जैसे पैरामीटर POSTed हैं, इसलिए आपको उन्हें पढ़ने के लिए Request.QueryString का उपयोग नहीं करना चाहिए, लेकिन Request["chunk"] सीधे इस तरह POST निकाय पर भी दिखेगा। आपको यह भी सुनिश्चित करना चाहिए कि रूट पर सर्वर पर TicketUploads फ़ोल्डर मौजूद है।

इस उदाहरण में एक ही पृष्ठ default.aspx का उपयोग अपलोड फ़ॉर्म दिखाने और अपलोड को संभालने के लिए किया जाता है। एक वास्तविक दुनिया के आवेदन में यह कुछ ऐसा नहीं है जो मैं करूंगा। मैं आपको एक अलग स्क्रिप्ट का उपयोग करने की सलाह दूंगा, जो फ़ाइल अपलोड जैसे जेनेरिक http हैंडलर (upload.ashx) को हैंडल करेगा।

अंत में आप देखेंगे कि मैंने कुछ डिफ़ॉल्ट सेटिंग्स का उपयोग किया है जिसे आप अपनी आवश्यकताओं को पूरा करने के लिए प्लगइन को संशोधित और पुन: कॉन्फ़िगर करना चाह सकते हैं। मैंने अभी प्रलेखन से सेटिंग ली है।

अद्यतन करें:

और जब से मैंने फ़ाइल अपलोड को संभालने के लिए एक अलग जेनेरिक http हैंडलर का उपयोग करने की सिफारिश की है, तो यह कैसे दिखता है:

using System.IO;
using System.Web;

public class Upload : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        int chunk = context.Request["chunk"] != null ? int.Parse(context.Request["chunk"]) : 0;
        string fileName = context.Request["name"] != null ? context.Request["name"] : string.Empty;

        HttpPostedFile fileUpload = context.Request.Files[0];

        var uploadPath = context.Server.MapPath("~/TicketUploads");
        using (var fs = new FileStream(Path.Combine(uploadPath, fileName), chunk == 0 ? FileMode.Create : FileMode.Append))
        {
            var buffer = new byte[fileUpload.InputStream.Length];
            fileUpload.InputStream.Read(buffer, 0, buffer.Length);

            fs.Write(buffer, 0, buffer.Length);
        }

        context.Response.ContentType = "text/plain";
        context.Response.Write("Success");
    }

    public bool IsReusable
    {
        get { return false; }
    }
}

अब जो कुछ बचा है, वह इस सामान्य हैंडलर को इंगित करने के लिए प्लगइन को फिर से कॉन्फ़िगर करना है:

...
runtimes: 'gears,flash,silverlight,browserplus,html5',
url: '/upload.ashx',
max_file_size: '10mb',
...




plupload