将视频从phonegap上传到php

时间:2017-06-01 09:38:45

标签: javascript php cordova phonegap

我正在使用此phonegap(js)代码将录制的视频上传到php服务器。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <title>Mobile_Insurance</title>

    </head>
    <body>

    <script type="text/javascript">

        $(document).ready(function(){
    $('input[name="visit"]').click(function(){
    var inputValue = $(this).attr("value");
    var targetBox = $("." + inputValue);
    $(".box").not(targetBox).hide();
    $(targetBox).show();
    });
    });


     function captureSuccess(mediaFiles) {
        var i, len;
        for (i = 0, len = mediaFiles.length; i < len; i += 1) {
            uploadFile(mediaFiles[i]);
        }
      }

    // Called if something bad happens.
    //
    function captureError(error) {
        var msg = 'An error occurred during capture: ' + error.code;
        navigator.notification.alert(msg, null, 'Uh oh!');
    }

    // A button will call this function
    //
    function captureVideo() {
        // Launch device video recording application,
        // allowing user to capture up to 2 video clips
        navigator.device.capture.captureVideo(captureSuccess, captureError, {limit: 1});
    }

    // Upload files to server
    function uploadFile(mediaFile) {
    var ft = new FileTransfer(),
    path = mediaFile.fullPath,
    name = mediaFile.name;
    var options = new FileUploadOptions();
    options.chunkedMode = true;
        options.fileKey = "file";
        options.fileName = name;
        options.mimeType = "video/mp4";
    var params = new Object();
    params.value1 = "test";
    params.value2 = "param";

    options.params = params;

    ft.upload(path, "http://192.168.0.46/upload/upload.php",
    function(result) {
        console.log('Upload success: ' + result.responseCode);
        console.log(result.bytesSent + ' bytes sent');
        console.log("Response = " + r.response);
        alert("Response = " + r.response);
     },
    function(error) {
        console.log('Error uploading file ' + path + ': ' + error.code);
        alert('Error uploading file ' + path + ': ' + error.code);
    },
    options); 
    alert(mediaFile.fullPath);
    }
    </script>
    <script type="text/javascript" src="cordova.js"></script>
    <div data-role="page">
        <div data-role="header">
          <h3>Welcome </h3>
        </div>
        <div data-role="main" class="ui-content">
          <h3 style="text-align: center;">Input Your IMEI:</h3>
          <input type="number"/>
          <h3 style="text-align: center;"> yes?</h3>

          <input type="radio" name="visit" value="YES"  id="Video">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; YES 
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <input type="radio" name="visit" value="NO" id="self">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; NO
          <br>
          <h3 style="text-align: center;"> damage.</h3>
          <input type="radio" name="damage" value="Physical">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Physical
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <input type="radio" name="damage" value="Water">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Water <br><br>
          <h3 style="text-align: center;">Please give a breig description about the damage</h3><br>
            <textarea rows="5" cols="10" style="resize:none"></textarea>
           <div class="YES box"><input type="button"  value="self analysis" hidden="true"></div> 
            <div class="NO box"> <button onclick="captureVideo();">Capture Video</button></div>

        </div>
      </div>
      </body>
      </html>

这是我的PHP代码..

<?php
  print_r($_FILES);
  $new_image_name = "r.mp4";
  move_uploaded_file($_FILES["file"]["tmp_name"], $new_image_name);
?>

uploadFile函数应该将文件上传到指定的php文件。但在我的情况下,phonegap文件传输给出错误代码1,找不到文件。我在捕获后提醒文件路径,这是要上传的文件。如何抛出错误代码1?

2 个答案:

答案 0 :(得分:1)

尝试一下,您也许可以使用

http://findnerd.com/list/view/Capturing-and-Uploading-Video-to-PHP-Server-in-Cordova/9398/

从网站上

  

如果要将图像作为base64字符串发送,则可以更改目标   输入Camera.DestinationType.DATA_URL,然后可以将imageData发送到   通过ajax调用服务器。或者,如果您要作为文件数组发送,则保留   与camera.DestinationType.FILE_URI相同的目的地类型,并使用   cordova文件插件以在服务器中发送文件数据:

var options = new FileUploadOptions();
options.fileKey="tickitFile";
options.fileName=imageData.substr(imageData.lastIndexOf('/')+1);
options.contentType = "multipart/form-data";
options.chunkedMode = false;
options.mimeType="image/jpeg";
options.httpMethod="POST";
options.headers =   {
    Connection: "close"
};    


var ft = new FileTransfer();


ft.upload(imageData, PHP&#95;URL, win, fail, options);
function win(r) {
    console.log("Response = " + r.response);
    console.log("Sent = " + r.bytesSent); 
}
function fail(error) { 
    console.log(JSON.stringify(error));
} 

答案 1 :(得分:0)

你可以尝试以下方法:

function upload(file){

        var fd = new FormData();
        fd.append("dir", dir);
        fd.append("file", file);
        var xhr = new XMLHttpRequest();

        xhr.open('POST', 'upload.php', true);
        xhr.send(fd);


        xhr.onreadystatechange = function() {

                if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {

                        //alert(xhr.responseText);
                        var message = xhr.responseText;
                        message=message.trim();

                        if ( message != 0)
                        {
                            //alert(message);
                        }           
                }
        };
    }

和php文件:

<?php
    if (isset($_FILES["file"]["name"])) {

        $destination = $_POST["dir"];

        $name = $_FILES["file"]["name"];
        $tmp_name = $_FILES['file']['tmp_name'];
        $error = $_FILES['file']['error'];



        //echo $name;
        //echo $tmp_name;
        //echo $error;

        move_uploaded_file($_FILES['file']['tmp_name'], $destination.$name);

    }

    echo "File transfer completed";
?>

XHR POST没有大小限制,但您正在向具有大小限制的PHP发送数据;)创建以下php文件并在浏览器中打开它:

现在搜索变量“post_max_size”,这个变量限制了可以发送到PHP的最大数据(但可以在php.ini中更改)

我的上传功能和我的php文件完美适用于输入文件,如:

var obj=document.getElementById("inputfile");

var len = obj.files.length;

for (i=0; i<=len; i++){

    upload( obj.files[i] );
}

对我来说,问题是你的capturevideo()函数的输出类型或captureSuccess(mediaFiles)中的错误:尝试更改如下所示的内容:

 function captureSuccess(mediaFiles) {
    var i, len;
    for (i = 0, len = mediaFiles.length; i < len; i += 1) {
        uploadFile(mediaFiles[i].fullPath);
    }
  }