[英]POST image to PHP file along with other data to be uploaded
I have a HTML page allowing a user to take a photo and that photo then shows up on the screen as a canvas image. 我有一个HTML页面,允许用户拍摄照片,然后该照片显示在屏幕上作为画布图像。 I want to now send this image to the server to be uploaded, along with other data, using POST method.
我现在想使用POST方法将此图像与其他数据一起发送到要上载的服务器。
JavaScript for displaying image: 用于显示图像的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 Form: 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 to add data to form (For the other data, how would I add image like this?): 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>
How would I go about doing this? 我该怎么做呢?
您必须将“file”类型的隐藏输入字段添加到表单中,并将put视频元素作为文件添加到新输入字段中!
您可以使用https://api.jquery.com/jquery.post/代替使用html表单进行POST
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.