多个图像上传到 Cordova 中的服务器

Question

我尝试将多张图片上传到服务器。我可以单击图像并将其显示在块中，但无法将其传输到服务器。我得到的错误是 04-02 10:35:41.984: I/chromium(23772): [INFO:CONSOLE(104)] "Uncaught TypeError: Cannot call method 'lastIndexOf' of undefined", source: file:///android_asset/www/index.html (104)

代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Submit form</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    var pictureSource;   // picture source
    var destinationType; // sets the format of returned value

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready",onDeviceReady,false);

    // device APIs are available
    //
    function onDeviceReady() {
        pictureSource = navigator.camera.PictureSourceType;
        destinationType = navigator.camera.DestinationType;
    }


    // Called when a photo is successfully retrieved
    //
   /* function onPhotoURISuccess(imageURI) {

        // Show the selected image
        var smallImage = document.getElementById('smallImage');
        smallImage.style.display = 'block';
        smallImage.src = imageURI;
    }*/

     function onPhotoDataSuccess1(imageData) {

      var smallImage1 = document.getElementById('smallImage1');
      smallImage1.style.display = 'block';
      smallImage1.src = "data:image/jpeg;base64," + imageData;
    }
     function onPhotoDataSuccess2(imageData) {

      var smallImage2 = document.getElementById('smallImage2');
      smallImage2.style.display = 'block';
      smallImage2.src = "data:image/jpeg;base64," + imageData;
    }
     function onPhotoDataSuccess3(imageData) {

      var smallImage3 = document.getElementById('smallImage3');
      smallImage3.style.display = 'block';
      smallImage3.src = "data:image/jpeg;base64," + imageData;
    }

    function capturePhoto1() {
        // Take picture using device camera and retrieve image as base64-encoded string
        navigator.camera.getPicture(onPhotoDataSuccess1, onFail, { quality: 20,
          destinationType: destinationType.DATA_URL,

          });
      }
      function capturePhoto2() {
        // Take picture using device camera and retrieve image as base64-encoded string
        navigator.camera.getPicture(onPhotoDataSuccess2, onFail, { quality: 20,
          destinationType: destinationType.DATA_URL,

          });
      }
      function capturePhoto3() {
        // Take picture using device camera and retrieve image as base64-encoded string
        navigator.camera.getPicture(onPhotoDataSuccess3, onFail, { quality: 20,
          destinationType: destinationType.DATA_URL,

          });
      }

    // A button will call this function
    /*
    function getPhoto(source) {
      // Retrieve image file location from specified source
      navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 20,
        destinationType: destinationType.FILE_URI,
        sourceType: source });
    }*/

     //selected photo URI is in the src attribute (we set this on getPhoto)
        var imageURI1 = document.getElementById('smallImage1').getAttribute("src");
        var imageURI2 = document.getElementById('smallImage2').getAttribute("src");
        var imageURI3 = document.getElementById('smallImage3').getAttribute("src");
        if (!imageURI1) {
            alert('Please select an image first.');
            return;
        }

        var items = [imageURI1,imageURI2,imageURI3];
        $.each(items,function(){
            uploadPhoto($(this));
        });


    function uploadPhoto(imageURI) {

        //set upload options
        var options = new FileUploadOptions();
        options.fileKey = "file";
        options.fileName = imageURI.substr(imageURI.lastIndexOf('/')+1);
        options.mimeType = "image/jpeg";

        options.params = {
            firstname: document.getElementById("firstname").value,
            lastname: document.getElementById("lastname").value,
            workplace: document.getElementById("workplace").value
        }

        var ft = new FileTransfer();
        ft.upload(imageURI, encodeURI("http://www.xyz.co/AppData/upload.php"), win, fail, options);
    }

    // Called if something bad happens.
    //
    function onFail(message) {
      console.log('Failed because: ' + message);
    }

    function win(r) {
        console.log("Code = " + r.responseCode);
        console.log("Response = " + r.response);
        //alert("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);
    }

    </script>
  </head>
  <body>
    <form id="regform">


        <input type="button" onclick="capturePhoto1();" value="Capture Photo"><br>
        <img style="display:none;width:60px;height:60px;" id="smallImage1" src="" />

        <input type="button" onclick="capturePhoto2();" value="Capture Photo"><br>
        <img style="display:none;width:60px;height:60px;" id="smallImage2" src="" />

        <input type="button" onclick="capturePhoto3();" value="Capture Photo"><br>
        <img style="display:none;width:60px;height:60px;" id="smallImage3" src="" />

        First Name: <input type="text" id="firstname" name="firstname"><br>
        Last Name: <input type="text" id="lastname" name="lastname"><br>
        Work Place: <input type="text" id="workplace" name="workPlace"><br>
        <input type="button" id="btnSubmit" value="Submit" onclick="uploadPhoto();">
    </form>
  </body>
</html>

我想 function uploadPhoto() 中有一些问题。 Foreach 循环未正确处理 imageURI。有什么解决办法？

Answer 1

看看对你有没有帮助。您的 uploadPhoto 函数具有 imageURI 参数，但您在单击按钮时调用 uploadPhoto() 函数而不传递任何参数。你的功能应该是

function intUpload(){
        var imageURI1 = document.getElementById('smallImage1').getAttribute("src");
        var imageURI2 = document.getElementById('smallImage2').getAttribute("src");
        var imageURI3 = document.getElementById('smallImage3').getAttribute("src");
        if (!imageURI1) {
            alert('Please select an image first.');
            return;
        }

        var items = [imageURI1,imageURI2,imageURI3];
        $.each(items,function(){
            uploadPhoto($(this));
        });
}

function uploadPhoto(imageURI) {
    //set upload options
    var d = new Date();
    var options = new FileUploadOptions();
    options.fileKey = "vImage" + d.getTime();
    options.fileName = imageURI.substr(imageURI.lastIndexOf('/')+1);
    options.mimeType = "image/jpeg";

    options.params = {
        firstname: document.getElementById("firstname").value,
        lastname: document.getElementById("lastname").value,
        workplace: document.getElementById("workplace").value
    };
    options.chunkedMode = false;

    var ft = new FileTransfer();
    ft.upload(imageURI, encodeURI("http://www.xyz.co/AppData/upload.php"), win, fail, options);
}

你的按钮点击应该是

<input type="button" id="btnSubmit" value="Submit" onclick="intUpload();">

您的 html 页面也不包含任何 jquery 文件，但您正在使用 $.each jquery 功能。请包含 jquery 文件

Answer 2

<script type="text/javascript" charset="utf-8">
            ///// photo for 1 photo
  
            var pictureSource;   // picture source
            var destinationType; // sets the format of returned value

            // Wait for device API libraries to load
            //
            document.addEventListener("deviceready",onDeviceReady,false);

            // device APIs are available
            //
            function onDeviceReady()
            {
                pictureSource=navigator.camera.PictureSourceType;
                destinationType=navigator.camera.DestinationType;
            }

            // Called when a photo is successfully retrieved
  
  
  
            var x=0;
            function onPhotoDataSuccess(imageURI)
            {
                x++;
                // Uncomment to view the base64-encoded image data
                console.log(imageURI);
   
                // Get image handle
                //
                var y = 'smallImage'+x;
                var smallImage = document.getElementById(y);
    
                smallImage.src = "data:image/jpeg;base64," + imageURI;
                // Unhide image elements
                //
                smallImage.style.display = 'block';

    
                // Show the captured photo
                // The in-line CSS rules are used to resize the image
                //
                //var fso=new ActiveXObject("Scripting.FileSystemObject");
                //fso.CopyFile("data:image/jpeg;base64," + imageURI,"file:///storage/sdcard/DCIM/");
    
  
            }

            // Called when a photo is successfully retrieved
            //
  
            function onPhotoURISuccess(imageURI)
            {
                x++;
                // Uncomment to view the base64-encoded image data
                console.log(imageURI);
                //alert(imageURI);
                // Get image handle
                //
                var y = 'smallImage'+x;
                var smallImage = document.getElementById(y);
                //alert(smallImage);
                smallImage.src = imageURI;
                // Unhide image elements
                //
                smallImage.style.display = 'block';


    
                //alert(smallImage.src)
            }

            // A button will call this function
            //
            function capturePhoto()
            {
                // Take picture using device camera and retrieve image as base64-encoded string
                navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
                    destinationType: destinationType.DATA_URL });
            }

            // A button will call this function
            //
  
            function capturePhotoEdit()
            {
                // Take picture using device camera, allow edit, and retrieve image as base64-encoded string
                navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
                    destinationType: destinationType.DATA_URL });
            }

  
            // A button will call this function
            //
            function getPhoto() 
            {
                // Retrieve image file location from specified source
                navigator.camera.getPicture(onPhotoDataSuccess, onFail, { 
                    quality: 50,
                    allowEdit: true,
                    destinationType: Camera.DestinationType.DATA_URL,
                    sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM
                });
                /* window.imagePicker.getPictures(
                function(results) {
                        for (var i = 0; i < results.length; i++) {
                                console.log('Image URI: ' + results[i]);
                                alert('Image URI: ' + results[i]);
                        }
                }, function (error) {
                        console.log('Error: ' + error);
                }, {
                        maximumImagesCount: 4,
                        width: 800
                }*/
            }

            // Called if something bad happens.
            //
            function onFail(message) 
            {
                alert('Failed because: ' + message);
            }

        </script>

多个图像上传到 Cordova 中的服务器

Multiple Image upload to server in Cordova

html

javascript

android

phonegap-plugins

cordova