如何从HTML5 FileUpload将文件内容传递给Web服务(asmx)?

时间:2012-05-29 19:51:27

标签: jquery asp.net html5

我想使用ASMX webservice将文件从Html5文件上传到jquery $.ajax。 我想知道我应该使用什么数据类型来反序列化webservice中的上传文件。

这是HTML代码:

<input type="file" name="fileToUpload"  id="fileToUpload" />
      <input type="button" onclick="uploadFile()" />

Javascript代码:

function uploadFile() {
    var ob=new Object();
    ob.name =document.getElementById('fileToUpload').files[0];
    var Result= JSON.stringify(ob);
    $.ajax(
    { url: "UploadWS.asmx/UploadedFile",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        type: "POST",
        data: "{'x':"+Result+"}",
        success: function() { },
        error: function() { alert('error'); }
    });
} 

Webservice代码:

public class ExtraInfo
    {
       //What data type write here?
    } 
[WebMethod]
    public void UploadedFile(object x) {
        JavaScriptSerializer Ser = new JavaScriptSerializer();
        ExtraInfo Ext = new ExtraInfo();
        Ext = Ser.Deserialize<ExtraInfo>(x.ToString());
    }

1 个答案:

答案 0 :(得分:6)

function uploadFile() {
    var data = new FormData(),
        file = $("#fileToUpload")[0].files[0];

    data.append( "name", file.name );
    data.append( "size", file.size );
    data.append( "type", file.type );
    data.append( "file", file );

    $.ajax(
    { url: "UploadWS.asmx/UploadedFile",
        dataType: "json",
        type: "POST",
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function() { },
        error: function() { alert('error'); }
    });
} 

这应该在您的服务器中显示为常规上传POST请求,其中"file"是上传文件的表单字段名称。我不知道如何用ASP.NET做到这一点。