How to make a photo upload web app using HYPE3


(iching) #1

I need to make a game using the photo taken by the user and upload the photo to the server. Need help. thx!!


(Nick ) #2

Try exploring some of the jQuery options out there to help with Camera control.
The biggest hurdle is your users devices and if their browsers will allow camera control.

http://www.jqueryrain.com/2013/10/best-jquery-webcam-plugin-example/

There are several jQuery scripts to help with file upload as well

http://designscrazed.org/html5-jquery-file-upload-scripts/


(Andrew) #3

You could use HTML5 to take the picture, and then using jQuery and ajax upload it to a site with this code:

<style>
#yourimage {
	width:100%;	
}
</style>

<input type="file" capture="camera" accept="image/*" id="takePictureField">
    
<img id="yourimage">
	
<script>

$("#takePictureField").on("change",gotPic);       
	
function gotPic(event) {
        if(event.target.files.length == 1 && 
           event.target.files[0].type.indexOf("image/") == 0) {
           $("#yourimage").attr("src",URL.createObjectURL(event.target.files[0]));
        }
}	
    
</script>  

The above will capture a image, or on a device like Tablet or Phone you can also take a photo.

Below is the code to upload it, again using JQuery:

var formData = new FormData($('#NewUserPic')[0]);

        $.ajax({
            url: 'handleImage.php',  //Server script to process data
            type: 'POST',
            data: formData,
            //Options to tell jQuery not to process data or worry about content-type.
            cache: false,
            contentType: false,
            processData: false,
            //Ajax events
            success: function (data) {
                   data = URL to image
            }
});

This below code is the PHP to handle (handleImage.php) the image (very basic)

$sourcePath = $_FILES['file']['tmp_name'];       // Storing source path of the file in a variable
$targetPath = "../PathToStorage/".$_FILES['file']['name']; // Target path where file is to be stored
move_uploaded_file($sourcePath,$targetPath) ;    // Moving Uploaded file

echo '../PathToStorage/' . $_FILES['file']['name'];

Hope this helps and gives you some ideas :slight_smile:


(iching) #4

This is really of great help! thx very much.


#5

Hi iching,
Did you manage to get it to work?

I’m struggling to make a small web app where the user can take a picture, display and upload it…It sounds like what you where working on.

thanks