2017-06-01 94 views
2

我正在使用此phonegap(js)代碼上傳錄製的視頻到php服務器。從手機上傳視頻到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 filetransfer給出錯誤代碼1,這是文件未找到。捕獲之後我會提醒文件路徑,這是相同的文件上傳。它如何拋出錯誤代碼1?

+0

以及如何'媒體文件.fullPath' l ooks喜歡? – jcesarmobile

+0

file:///storage/emulated/0/DCIM/Camera/20170601_144112.mp4 –

+0

閱讀插件兼容性說明,不支持fullPath https://github.com/apache/cordova-plugin-file-transfer#backwards-兼容性注意事項 – jcesarmobile

回答

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文件,並在瀏覽器中打開它:

現在搜索v良莠不齊「的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)的錯誤:試圖更改smomething像下面這樣:

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

我更新我的答案:) – Aotoki

+0

我沒有得到任何錯誤,但文件移動到哪個位置?因爲我無法在我的文件夾中看到 –

+0

警報提供給我視頻在我的手機中的路徑 –