使用Cordova FileTransfer插件

时间:2016-06-10 12:18:22

标签: asp.net cordova file-upload cordova-plugins jquery-file-upload

我有一个使用cordova文件传输插件创建的简单移动应用程序。以下是上传代码

function uploadPhoto(fileURI) {
            var options = new FileUploadOptions();
            options.fileKey = fileURI.substr(fileURI.lastIndexOf('/') + 1);
            options.fileName = fileURI.substr(fileURI.lastIndexOf('/') + 1);

            if (cordova.platformId == "android") {
                options.fileName += ".jpg" 
            }

            options.mimeType = "image/jpeg";
            //options.contentType = 'multipart/form-data';
            options.params = {}; // if we need to send parameters to the server request 

            options.headers = {
                Connection: "Close"
            };
            //options.httpMethod = 'POST';
            //options.chunkedMode = false;

            var ft = new FileTransfer();

            rst.innerHTML = "Upload in progress...";
            ft.upload(
                fileURI,
                encodeURI("http://localhost:55013/virtualroomservice.asmx/SaveImage"),
                onFileUploadSuccess,
                onFileTransferFail,
                options, true);

            function onFileUploadSuccess (result) {
               // rst.innerHTML = "Upload successful";
                console.log("FileTransfer.upload");
                console.log("Code = " + result.responseCode);
                console.log("Response = " + result.response);
                console.log("Sent = " + result.bytesSent);
                console.log("Link to uploaded file: https://www.kinrep.com/foster/ws/contentlibrary" + result.response);
                var response = result.response;
                var destination = "https://www.kinrep.com/foster/WS/ContentLibrary" + response.substr(response.lastIndexOf('=') + 1);
                if(this.id == 'uploadcheque') {
                    document.getElementById("hdnchequeimgpath").value = destination;

                } else if(this.id == 'uploaddoorlock') {

                    document.getElementById("hdndoorlockedimgpath").value = destination;
                } else {

                    document.getElementById("hdnothersimgpath").value = destination;
                }
                rst.innerHTML = "File uploaded to: " +
                                                              destination + 
                                                              "</br><button class=\"button\" onclick=\"window.open('" + destination + "', '_blank', 'location=yes')\">Open Location</button>";
                //document.getElementById("downloadedImage").style.display="none";
            }

            function onFileTransferFail (error) {
                rst.innerHTML = "File Transfer failed: " + error.code;
                console.log("FileTransfer Error:");
                console.log("Code: " + error.code);
                console.log("Source: " + error.source);
                console.log("Target: " + error.target);
            }
}

以下是服务器代码

[WebMethod]
[ScriptMethod]
public string SaveImage()
{
    try
    {
        HttpPostedFile file = HttpContext.Current.Request.Files[0];
        if (file == null)
            return "0";

        string targetFilePath = Server.MapPath(@"WS\ContentLibrary") + file.FileName;
        file.SaveAs(targetFilePath);
    }
    catch (Exception ex)
    {
        string s = ex.Message;
        return s;
    }

    return "1";

}

当调用调用时,它会进入SaveImage webmethod,但HttpContext.Current.Request.Files.Count为0.当我指向filedropper.com时,同样的调用,如示例代码所示,它工作正常(我可以看到上传图像在filedrop.com上)但指向我的Windows Web服务时无法正常工作。我看过其他各种帖子,但不能弄清楚什么是错的。在客户端控制台中,它写入没有发送的字节,这意味着客户端没有问题,因为服务器端似乎存在问题。任何人都可以建议问题出在哪里?

以下是调试输出 enter image description here

UPDATE-06112016-5:35PMIS 仍然无能为力也发布在http://www.telerik.com/forums/file-upload-not-working-93d711a97c9b

UPDATE-06112016-9-54PMIS

在一场噩梦未能弄清楚如何解决这个问题后,我决定选择在iis上托管一个php作为替代方案。 Cordova文件传输插件似乎与php服务器页面正常工作here

1 个答案:

答案 0 :(得分:2)

显然,快速CGI模式下的IIS 7.5存在关于分块多部分表单数据的错误:https://bugs.php.net/bug.php?id=60826

Cordova的FileTransfer插件默认将chunked模式设为true:

  

chunkedMode :是否以分块流模式上传数据。默认为true。 (布尔型)

在我的情况下,这正是问题,并将options.chunkedMode设置为true立即修复它。

请注意,您将无法再使用 onprogress 属性。

  

onprogress :每当传输一大块新数据时,都会使用ProgressEvent调用。 (功能)