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

匿名 (未验证) 提交于 2019-12-03 09:58:14

问题:

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

回答1:

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.



标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!