Phonegap照片上传脚本错误

时间:2015-05-10 17:56:39

标签: javascript android cordova phonegap-build

尝试使用phonegap将照片从手机上传到远程服务器。编译运行应用程序后,我收到一条错误消息:

  

上传失败的代码= 3.

我阅读了网页,发现应该增加一行脚本(

options.chunkedMode = false;
            options.headers = {
        Connection: "close"

) 

仍然会再次出现同样的错误。

<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>PhoneGap</title>
    <style type="text/css">
        div {border: 1px solid black;}
        input {width: 100%;}
    </style>
   <script src="cordova-2.5.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    var deviceReady = false;

    /**
     * Take picture with camera
     */
    function takePicture() {
        navigator.camera.getPicture(
            function(uri) {
                var img = document.getElementById('camera_image');
                img.style.visibility = "visible";
                img.style.display = "block";
                img.src = uri;
                document.getElementById('camera_status').innerHTML = "Success";
            },
            function(e) {
                console.log("Error getting picture: " + e);
                document.getElementById('camera_status').innerHTML = "Error getting picture.";
            },
            { quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI});
    };

    /**
     * Select picture from library
     */
    function selectPicture() {
        navigator.camera.getPicture(
            function(uri) {
                var img = document.getElementById('camera_image');
                img.style.visibility = "visible";
                img.style.display = "block";
                img.src = uri;
                document.getElementById('camera_status').innerHTML = "Success";
            },
            function(e) {
                console.log("Error getting picture: " + e);
                document.getElementById('camera_status').innerHTML = "Error getting picture.";
            },
            { quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI, sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY});
    };

    /**
     * Upload current picture
     */
    function uploadPicture() {

        // Get URI of picture to upload
        var img = document.getElementById('camera_image');
        var imageURI = img.src;
        if (!imageURI || (img.style.display == "none")) {
            document.getElementById('camera_status').innerHTML = "Take picture or select picture from library first.";
            return;
        }

        // Verify server has been entered
        server = document.getElementById('serverUrl').value;
        if (server) {

            // Specify transfer options
            var options = new FileUploadOptions();
            options.fileKey="file";
            options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
            options.mimeType="image/jpeg";
            options.chunkedMode = false;
            options.headers = {
        Connection: "close"
    }
    options.chunkedMode = false;

            // Transfer picture to server
            var ft = new FileTransfer();
            ft.upload(imageURI, 'http://mywebsite/upload.php', function(r) {
                document.getElementById('camera_status').innerHTML = "Upload successful: "+r.bytesSent+" bytes uploaded.";              
            }, function(error) {
                document.getElementById('camera_status').innerHTML = "Upload failed: Code = "+error.code;               
            }, options);
        }
    }

    /**
     * View pictures uploaded to the server
     */
    function viewUploadedPictures() {

        // Get server URL
        server = document.getElementById('serverUrl').value;
        if (server) {

            // Get HTML that lists all pictures on server using XHR 
            var xmlhttp = new XMLHttpRequest();

            // Callback function when XMLHttpRequest is ready
            xmlhttp.onreadystatechange=function(){
                if(xmlhttp.readyState === 4){

                    // HTML is returned, which has pictures to display
                    if (xmlhttp.status === 200) {
                        document.getElementById('server_images').innerHTML = xmlhttp.responseText;
                    }

                    // If error
                    else {
                        document.getElementById('server_images').innerHTML = "Error retrieving pictures from server.";
                    }
                }
            };
            xmlhttp.open("GET", server , true);
            xmlhttp.send();         
        }   
    }

    /**
     * Function called when page has finished loading.
     */
    function init() {
        document.addEventListener("deviceready", function() {deviceReady = true;}, false);
        window.setTimeout(function() {
            if (!deviceReady) {
                alert("Error: PhoneGap did not initialize.  Demo will not run correctly.");
            }
        },2000);
    }



    </script>

  </head>
  <body onload="init();">
    <h3>PhoneGap Camera Upload Demo</h3>

    <div>
      <h3>Server URL for upload.php:</h3>
        <input id="serverUrl" type="text" value="http://mywebsite/pictures.php" />
    </div>
    <br/>

    <!-- Camera -->
    <div>
        <h3>Camera:</h3>
        <b>Status:</b> <span id="camera_status"></span><br>
        <b>Image:</b> <img style="width:120px;visibility:hidden;display:none;" id="camera_image" src="" />
    </div>

    <!-- Actions -->
    <div>
        <input type="button" onclick="takePicture();" value="Take Picture" /><br/>
        <input type="button" onclick="selectPicture();" value="Select Picture from Library" /><br/>
        <input type="button" onclick="uploadPicture();" value="Upload Picture" />
    </div>
    <br/>

    <!-- Server pictures -->
    <div>
        <h3>Server:</h3>
        <b>Images on server:</b>
        <div id="server_images"></div>
    </div>

    <!-- Actions -->
    <div>
        <input type="button" onclick="viewUploadedPictures();" value="View Uploaded Pictures" />
    </div>

  </body>
</html>

1 个答案:

答案 0 :(得分:0)

确保您的上传功能与此类似

onBeforeDestroy

它100%工作。

参考:http://blog.revivalx.com/2014/07/12/upload-image-using-file-transfer-cordova-plugin-for-ios-and-android/