Изображение POST для файла PHP вместе с другими данными, которые будут загружены

У меня есть HTML-страница, позволяющая пользователю делать снимок, и эта фотография появляется на экране в виде холста. Я хочу отправить это изображение на сервер, который будет загружен вместе с другими данными, используя метод POST.Изображение POST для файла PHP вместе с другими данными, которые будут загружены

JavaScript для отображения картинки:

<script> 
       // Elements for taking the snapshot 
       var video = document.getElementById('video'); 
       var canvas = document.getElementById('canvas'); 
       var context = canvas.getContext('2d'); 
       var dataURL; 

       //Hide photo elements until user clicks button 
       $("#snap").hide(); 
       $("#canvas").hide(); 
       $("#video").hide(); 

       //user clicks take photo button 
       $("#showCam").click(function() { 
        $(this).hide(); 
        $("#snap").show(); 
        $("#video").show(); 
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { 
         navigator.mediaDevices.getUserMedia({ 
          video : true 
         }).then(function(stream) { 
          video.src = window.URL.createObjectURL(stream); 
          video.play(); 
         }); 
        } 
       }); 

       // Trigger photo take 
       $("#snap").click(function() { 
        context.drawImage(video, 0, 0, 640, 480); 
        $("#canvas").show(); 
        $(this).hide(); 
        $("#video").hide(); 

        //convert canvas image to url format 
        dataURL = canvas.toDataURL(); 
       }); 




      </script>

HTML форма:

<div id=formContainer> 
     <form id="myForm" action="insert.php" method="post" enctype="multipart/form-data"> 
      Description 
      <input type="text" name="fdesc"> 
      <br> 
      <input type="submit" value="Insert"> 
     </form> 
    </div>

JQuery, чтобы добавить данные для формирования (Для других данных, как бы я добавить изображение, как это?):

<script> 
     $('#myForm').submit(function() { 
      var input = $("<input>").attr("type", "hidden").attr("name", 'lat').val(latArray); 
      $('#myForm').append($(input)); 

      var input = $("<input>").attr("type", "hidden").attr("name", 'lon').val(lonArray); 
      $('#myForm').append($(input)); 

      //var input = $("<input>").attr("type", "file").attr("name", 'img').val(image); 
      //$('#myForm').append($(input)); 

      return true; 
     }); 

    </script>

Как бы я это сделал?

источник

2017-02-23 user3561624

ли вы импортировать пользовательский интерфейс WebRTC? –