Question

我在这里面临问题，因为在选择图片后，手机屏幕图片会上传到服务器。我不想在提交表单之前上传图片。图像会自动上传到服务器，这是我不想要的。我想上传带有表单的图像，其中表单包含需要与图像一起发送的更多字段。提交表单的可能方式有哪些？

<!DOCTYPE HTML >
<html>
<head>
<title>Registration Form</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
<script type="text/javascript" charset="utf-8">

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

    // PhoneGap is ready
    function onDeviceReady() {
// Do cool things here...
    }

    function getImage() {
        // 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);
        options.mimeType="image/jpeg";

        var params = new Object();
        params.value1 = "test";
        params.value2 = "param";

        options.params = params;
        options.chunkedMode = false;

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

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

    function fail(error) {
        alert("An error has occurred: Code = " = error.code);
    }

    </script>
</head>
<body>
<form id="regform">
<button onclick="getImage();">select Avatar<button>
<input type="text" id="firstname" name="firstname" />
<input type="text" id="lastname" name="lastname" />
<input type="text" id="workPlace" name="workPlace" class="" />
<input type="submit" id="btnSubmit" value="Submit" />
</form>
</body>
</html>

Answer 1

创建两个可以单独调用的函数。一个用于获取图像的功能，另一个用于上传图像的功能。

您可以执行以下操作。

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


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

    function uploadPhoto() {

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

        //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://some.server.com/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">
        <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Select Photo:</button><br>
        <img style="display:none;width:60px;height:60px;" id="smallImage" 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>

Answer 2

您已经在示例中发送了自定义字段。

var params = new Object();
params.value1 = "test";
params.value2 = "param";

options.params = params;

只需使用表单字段填充params。

Answer 3

我也遇到了同样的问题，但我一次只使用了两个服务器端调用。在此，在第一次调用提交数据并使用JSON在回调中获取其id，然后使用此id上传图像。在服务器端使用此ID更新数据和图像。

$('#btn_Submit').on('click',function(event) {
   event.preventDefault();
   if(event.handled !== true)
   {
      var ajax_call = serviceURL; 
      var str = $('#frm_id').serialize();                 
      $.ajax({
      type: "POST",
      url: ajax_call,
      data: str,
      dataType: "json",
      success: function(response){
              //console.log(JSON.stringify(response))
        $.each(response, function(key, value) { 
              if(value.Id){                               
                   if($('#vImage').attr('src')){
                         var imagefile = imageURI; 
                          $('#vImage').attr('src', imagefile);
                        /* Image Upload Start */
                          var ft = new FileTransfer();                     
                        var options = new FileUploadOptions();                      
                        options.fileKey="vImage";                      
                        options.fileName=imagefile.substr(imagefile.lastIndexOf('/')+1);
                        options.mimeType="image/jpeg";  
                        var params = new Object();
                        params.value1 = "test";
                        params.value2 = "param";                       
                        options.params = params;
                        options.chunkedMode = false;                       
                        ft.upload(imagefile, your_service_url+'&Id='+Id+'&mode=upload', win, fail, options); 
                      /* Image Upload End */
                   }      
               }

             }); 
          }
     }).done(function() {
          $.mobile.hidePageLoadingMsg();              
     })

   event.handled = true;
  }
  return false;
});

在服务器端使用PHP

if($_GET['type'] != "upload"){
  // Add insert logic code
}else if($_GET['type'] == "upload"){
  // Add  logic for image 
  if(!empty($_FILES['vImage']) ){ 
    // Copy image code and update data  
  }
}

Answer 4

我无法使用这些插件上传其他答案的文件。

问题似乎源于FileTransfer plugin，其中指出：

fileURL：表示设备上的文件或数据URI的文件系统URL。

但没有似乎对我有效。相反，我需要使用File plugin来创建一个临时文件，使用数据uri来获取blob对象：在他们的示例中，writeFile是一个带fileEntry的函数（返回者createFile）和dataObj（blob）。写入文件后，可以检索其路径并将其传递给FileTransfer实例。看起来很糟糕，但至少现在上传了。

PhoneGap将图像上传到服务器上的表单提交

4 个答案: