How to pass file content into [WebMethod] with jquery uploadify plugin

I would like to pass file content into [WebMethod] with jquery uploadfy plugin But the Upload method can not be invoked.Can anyone help me out? Thanks in advance! Index.aspx:

<head runat="server">
<title></title>
<link href="uplodify/uploadify.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="uplodify/swfobject.js" type="text/javascript"></script>
<script src="uplodify/jquery.uploadify.v2.1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#file_upload').uploadify({
            'uploader': '/uplodify/uploadify.swf',
            'script': '/Index.aspx/Upload',
            'cancelImg': '/uplodify/cancel.png',
            'buttonImg': '/uplodify/browse.jpg',
            'sizeLimit': 262144, 
            'fileExt': '*.jpg',
            'fileDesc': '*.jpg',
            'folder': '/pic',
            'onProgress': function (event, ID, fileObj, data) {
                var bytes = Math.round(data.bytesLoaded / 1024);
                $('#' + $(event.target).attr('id') + ID).find('.percentage').text(' - ' + bytes + 'KB ');
                return false;
            },
            'onSelect': function (event, ID, fileObj) {
                if (parseInt(fileObj.size) > 262144) {
                    window.alert fileObj.name");
                    return false;
                }
            },
            'onComplete': fun

        });

    });

    function checkImport() {
        if ($.trim($('#file_uploadQueue').html()) == "") {
            alert('please select pic！');
            return false;
        }
        else {
            jQuery('#file_upload').uploadifyUpload();
            return true;
        }

    }
    function fun(event, queueID, fileObj, response, data) {


    }

</script>
</head>


  <body>
<form id="form1" runat="server">
<div>
    <img height="100" width="100" src="nopic.jpg" id="filesUploaded" runat="server" />
    <input id="file_upload" name="file_upload" type="file" />
    <input id="Button1" type="button" value="uploadfile" onclick="checkImport()" runat="server"
        class="ui-corner-all" /><br />
</div>
</form>
</body>

Index.cs:

  public partial class Index : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    [WebMethod]
    public static string Upload(byte[] FileData)
    {

        return "";
    }
}

In ASP.NET Page methods expect to be invoked using application/json content type. So you could use either a new WebForm or a generic handler to handle the file upload:

$(document).ready(function () {
    $('#file_upload').uploadify({
        'swf': '<%= ResolveUrl("~/uploadify/uploadify.swf") %>',
        'uploader': '<%= ResolveUrl("~/upload.ashx") %>'
    });
});

and the generic handler might look like this:

public class Upload : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        HttpPostedFile uploadedFile = context.Request.Files["FileData"];
        // TODO: do something with the uploaded file. For example
        // you could access its contents using uploadedFile.InputStream

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

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

Also to facilitate debugging use a tool such as Fiddler as it allows you to inspect the HTTP traffic between the client and the web server, showing you potential errors you might have. Also a javascript debugging tool such as FireBug or Chrome developer tools is a must-have.

来源：https://stackoverflow.com/questions/13321860/how-to-pass-file-content-into-webmethod-with-jquery-uploadify-plugin

标签

ASP.NET

uploadify