如何使用php和javascript在网页中获取显示图像的路径

时间:2015-03-23 16:58:31

标签: javascript php

你好我在javasript中使用网络摄像头拍摄图像并将图像上传到目录。我想将拍摄的图像链接到用户名。我可以这样做吗。

3 个答案:

答案 0 :(得分:0)

你可以做的是,如果你知道与服务器上的php文件有关的图像(如果图像在图像/上传中,而php文件在php / pages中),你可以在你的运行中运行以下内容php文件:

    $username = "bob33";
    $currentTimestamp = time();
    shell_exec("mv ../../images/uploads/" . currentTimestamp . " ../../images/uploads/" . $username);

然而,更好的方法是这样做(因为你不能保证时间戳与保存镜头的瞬间相同,而且多个用户搞砸的是更改实际截屏的代码给它用户标识值或与数据库表中的用户关联的某种标记。

答案 1 :(得分:0)

谢谢@Antoine Dahan。我没有尝试过你的方法,但是昨天我卷起了头,得到了怎样去了。我将所有的网络摄像头和ajax代码放在一个js文件中,然后将快照的名称存储在parmanent js变量中,然后通过ajax发送它它效果很好。

答案 2 :(得分:0)

这已使用多步骤形式,包含3个步骤,验证,网络摄像头和ajax xmlhttpRequest与服务器进行通信

webcam.set_api_url('upload.php');
webcam.set_quality(90);
webcam.set_shutter_sound(true);

webcam.set_hook('onComplete', 'handleOnComplete');

function takePhoto() {
document.getElementById('imageDiv').innerHTML ='<img src="uploading.gif">';
webcam.snap();
}

function handleOnComplete(msg) {
if (msg.match(/(http\:\/\/\S+)/)) {
    var image_url = RegExp.$1;
//this image_url is waht will be sent to the server////
    document.getElementById('imageDiv').innerHTML = '<img src="'
            + image_url + '">';
        var myurl=image_url;
//down here am storing the image_url variable parmanent to be accessed            outside the function by ajax ////
        localStorage.setItem('myfix',myurl);
    webcam.reset();
        simage =localStorage.getItem('myfix');
} else
    alert(" Error Occured when capturing image: " + image_url);
}
//////////////////////////////
/**
 * 
 */
var firstname, secondname, email, phonenumber
subject, message, image;
/**
 * 
 * @param divname
 * @returns The div content without the value.
 */
function getDivValues(divname) {
return document.getElementById(divname);
}
/**
 * processes the first step of the form.
 */
function processStep1() {
firstname = getDivValues('firstname').value.trim();
secondname = getDivValues('secondname').value.trim();
email = getDivValues('email').value.trim();
phonenumber = getDivValues('phonenumber').value.trim();
subject = getDivValues('subject').value.trim();
message = getDivValues('textmessage').value.trim();
if (firstname && secondname && email && phonenumber && subject && message) {

    getDivValues('step1').style.display = 'none';
    getDivValues('step2').style.display = 'block';
    getDivValues('progressbar').value = 50;
    getDivValues('status').innerHTML = 'step 2 of 3';

} else {
    alert('kindly provide all details');
}

}
function processStep2() {
image = getDivValues('imageDiv').innerHTML;
if (image.trim() !== '') {
    getDivValues('step2').style.display = 'none';
    getDivValues('showpreview').style.display = 'block';
    getDivValues('showfname').innerHTML = firstname;
    getDivValues('showsname').innerHTML = secondname;
    getDivValues('showemail').innerHTML = email;
    getDivValues('showphonenumber').innerHTML = phonenumber;
    getDivValues('showsubject').innerHTML = subject;
    getDivValues('showmessage').innerHTML = message;
    getDivValues('showphoto').innerHTML = image;
    getDivValues('progressbar').value = 100;
    getDivValues('status').innerHTML = 'STEP 3 of 3';
} else {
    alert('please take a photo to proceed');
}
}
function reverseStep2() {
getDivValues('showpreview').style.display = 'none';
getDivValues('step2').style.display = 'none';
getDivValues('step1').style.display = 'block';
getDivValues('progressbar').value = 0;
getDivValues('status').innerHTML = 'STEP 1 of 3';

}
function cancelSubmission() {
getDivValues('response').style.display = 'none';
getDivValues('step1').style.display = 'block';
getDivValues('showpreview').style.display = 'none';
getDivValues('step2').style.display = 'none';
getDivValues('progressbar').value = 0;
getDivValues('status').innerHTML = 'STEP 1 of 3';
$('#firstname').val('');
$('#secondname').val('');
$('#subject').val('');
$('#textmessage').val('');
$('#email').val('');
$('#phonenumber').val('');

}

function submitForm() {
getDivValues('webcam_multiphase').method = 'post';
getDivValues('webcam_multiphase').action = 'userdata.php';

if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
} else {
    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        getDivValues('response').style.display = 'block';
        getDivValues('response').innerHTML += xmlhttp.responseText;
        getDivValues('showpreview').style.display = 'none';
    }
}
sfname = 'firstname=' + firstname;
ssecondname = 'secondname=' + secondname;
semail = 'email=' + email;
sphonenumber = 'phonenumber=' + phonenumber;
ssubject = 'subject=' + subject;
smessage = 'message=' + message;
ssimage = 'imagepath=' + simage;
phpvariables = sfname + '&' + ssecondname + '&' + semail + '&'
        + sphonenumber + '&' + ssubject + '&' + smessage+'&'+ssimage;
xmlhttp.open('post', 'userdata.php', true);
xmlhttp.setRequestHeader('Content-Type',
        'application/x-www-form-urlencoded');
xmlhttp.send(phpvariables);
//window.location.href = 'messageboard.php';
}
function isString(fieldname) {
$('.error').remove();
$('.success').remove();
var stringMatch = /^[a-zA-Z]+$/;
if (!$(fieldname).val().match(stringMatch)) {
    $(fieldname).after(
            '<span class="error">please supply letters only</span>');
    $(fieldname).val('');
} else {
    $(fieldname)
            .after('<span class="success"><img src="passed.png"</span>');
}
}

function isEmail(fieldname) {
$('.error').remove();
$('.success').remove();
var emailMatch = /^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i;
if (!$(fieldname).val().match(emailMatch)) {
    $(fieldname).after(
            '<span class="error">type a correct email address</span>');
} else {
    $(fieldname)
            .after('<span class="success"><img src="passed.png"</span>');
}
}

function isNumber(fieldname) {
$('.error').remove();
$('.success').remove();
var numberMatch = /^\d+$/;
if (!$(fieldname).val().match(numberMatch)) {
    $(fieldname).after(
            '<span class="error">please supply numbers only</span>');
    $(fieldname).val('');
} else {
    $(fieldname)
            .after('<span class="success"><img src="passed.png"</span>');
}
}