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

本文介绍了将多个图像上传到Cordova中的服务器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我尝试将多个图像上传到服务器。
我可以单击图像并以块显示它，但不能将其传输到服务器。我得到的错误是 04-02 10：35：41.984：I / chromium（23772）：[INFO：CONSOLE（104）]未捕获的TypeError：无法调用未定义的方法'lastIndexOf'，源：file：///android_asset/www/index.html（104）

I tried uploading multiple Images to server.I am able to click images and display it in block but not able to transfer it to server. Error I am getting is 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。有什么解决方案？

I guess there's some problem in function uploadPhoto(). Foreach loop is not handling imageURI properly. What can be the solution?

`推荐答案`

请查看它是否对您有所帮助。您的 uploadPhoto 函数具有 imageURI 参数，但是您在单击按钮时调用了uploadPhoto（）函数，但未传递任何参数。您的函数应该是

Please see if it help for you. your uploadPhoto function has the imageURI parameter but you are calling the uploadPhoto() function in button click without passing any parameter. your function should be

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);
}

并且您的按钮单击应该为

and your button click should be

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

您的html页面也不包含任何 jquery 文件，但您使用的是 $。each jQuery函数。请包括jquery文件

also your html page doesn't include any jquery file but you are using $.each jquery function. please include the jquery file

                        这篇关于将多个图像上传到Cordova中的服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！