如何使用Phonegap 和JqueryMobile 上传文件? [英] How to upload file with Phonegap and JqueryMobile?

问题描述

我正在使用 JQM 和 PhoneGap 为 Android 构建一个移动应用程序.我需要将文件(图像)上传到远程服务器(从画廊或用相机拍照).基本上可以使用phonegap文件AP​​I来完成，问题是服务器被写成支持简单的POST提交.

I'm building a mobile app for Android with JQM and PhoneGap. I need to upload a file (image) to remote server (from galery or take a picture with camera). Basically it can be done using phonegap file API, the problem is that the server was written to support simple POST submission.

我需要的是在我的应用请求中模拟"精确，因为它将从以下 html 表单发送.另外我需要得到服务器响应.

What I need is to "simulate" in my app request exact as it would sent from the following html form. In addition I need to get the server response.

<form name="myWebForm" ENCTYPE="multipart/form-data" action="http://www.myurl.com/api/uploadImage "method="post">
    <input type="file" name="image" />
    <input type="submit" value="Submit"/>       
</form>

我尝试使用 phonegap 文件 API，但服务器端检索到的数据的结构与应有的不同.

I tried to use phonegap file API but the structure of the retrieved data on the server side is different than it should be.

我尝试在我的应用程序中实现该表单，但选择文件"按钮被禁用...

I tried to implement that form in my app but the "choose file" button was disabled...

如何在不改变服务器端的情况下实现?

How it can be achieved without making any changes on the server side?

推荐答案

您不能在 Phonegap 上使用输入文件.不支持.你需要做这样的事情:

You can't use input file on Phonegap. It's not supported. You need make something like this:

    function onDeviceReady() {

        // Retrieve image file location from specified source
        navigator.camera.getPicture(uploadPhoto,
                                    function(message) { alert('get picture failed'); },
                                    { quality: 50, 
                                    destinationType: navigator.camera.DestinationType.FILE_URI,
                                    sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY }
                                    );

    }

    function uploadPhoto(imageURI) {
        var options = new FileUploadOptions();
        options.fileKey="file";
        options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1)+'.png';
        options.mimeType="text/plain";

        var params = new Object();

        options.params = params;

        var ft = new FileTransfer();
        ft.upload(imageURI, encodeURI("http://some.server.com/upload.php"), win, fail, options);
    }

    function win(r) {
        console.log("Code = " + r.responseCode);
        console.log("Response = " + r.response);
        console.log("Sent = " + r.bytesSent);
    }

    function fail(error) {
        alert("An error has occurred: Code = " + error.code);
        console.log("upload error source " + error.source);
        console.log("upload error target " + error.target);
    }

在 getPicture 方法中，您将选择文件来源.查看更多信息:http://docs.phonegap.com/en/2.1.0/cordova_file_file.md.html#FileTransfer

On getPicture method you will choose what's your file source. See more info: http://docs.phonegap.com/en/2.1.0/cordova_file_file.md.html#FileTransfer

需要指定 fileName 扩展名以及在text/plain"格式上请求 mimeType 以发送文本格式的图像.至于参数，如果你不需要它们，为什么要使用它们?

The fileName extension was needed specify as well as the mimeType is requested on 'text/plain' format to send image on text format. As for the params, if you don't need them why use them?

这篇关于如何使用Phonegap 和JqueryMobile 上传文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！