Question

我想用jquery uploadfy插件将文件内容传递到[WebMethod] 但是上传方法无法调用。任何人都可以帮我解决？提前致谢！的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 "";
    }
}

Answer 1

在ASP.NET中Page methods期望使用application/json内容类型调用。因此，您可以使用新的WebForm或通用处理程序来处理文件上载：

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

，通用处理程序可能如下所示：

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; }
    }
}

同样为了便于调试，请使用Fiddler之类的工具，因为它允许您检查客户端和Web服务器之间的HTTP流量，显示您可能遇到的潜在错误。此外，还需要一个javascript调试工具，如FireBug或Chrome开发人员工具。

如何使用jquery uploadify插件将文件内容传递到[WebMethod]

1 个答案: