多个图像上传到服务器在科尔多瓦

问题描述：

我尝试上传多个图像到服务器。我可以点击图片并以块形式显示，但无法将其传输到服务器。错误我得到的是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。什么是解决方案？

答

请看看它是否对你有帮助。您的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的文件

我怎样才能检索到服务器端？我尝试了下面的代码：'new_image_name = array（“red.jpg”，“green.jpg”，“blue.jpg”）; foreach（$ new_image_name为$ value）{ $ destination = $ _SERVER ['DOCUMENT_ROOT']。 “/AppData/uploads/".$value; move_uploaded_file（$ _ FILES [“file”] [“tmp_name”]，$ destination）; }'但只有1张图片上传（red.jpg）。 – 2015-04-02 06:24:10

请检查上传函数chunkedMode和fileKey选项，对于服务器端，我使用的是asp.net mvc。 – Ashokbharathi 2015-04-02 06:39:33

请检查这个职位。 http://stackoverflow.com/questions/13860405/how-to-retrieve-post-data-from-phonegaps-file-transfer-api – Ashokbharathi 2015-04-02 06:42:35

答

<script type="text/javascript" charset="utf-8"> 
 
      ///// photo for 1 photo 
 
\t \t 
 
      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 
 
\t \t 
 
\t \t 
 
\t \t 
 
      var x=0; 
 
      function onPhotoDataSuccess(imageURI) 
 
      { 
 
       x++; 
 
       // Uncomment to view the base64-encoded image data 
 
       console.log(imageURI); 
 
\t \t \t 
 
       // Get image handle 
 
       // 
 
       var y = 'smallImage'+x; 
 
       var smallImage = document.getElementById(y); 
 
\t \t 
 
       smallImage.src = "data:image/jpeg;base64," + imageURI; 
 
       // Unhide image elements 
 
       // 
 
       smallImage.style.display = 'block'; 
 

 
\t \t 
 
       // 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/"); 
 
\t \t 
 
\t \t 
 
      } 
 

 
      // Called when a photo is successfully retrieved 
 
      // 
 
\t \t 
 
      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'; 
 

 

 
\t \t 
 
       //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 
 
      // 
 
\t \t 
 
      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 }); 
 
      } 
 

 
\t \t 
 
      // 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>

多个图像上传到服务器在科尔多瓦

相关推荐