Solved

How to save picture tacen from mobilen camera to my server

Posted on 2013-06-14
4
475 Views
Last Modified: 2013-07-25
Hi!

I am using HTML5, and have testet this code:

<input id="file-input" type="file" name="image" accept="tor/*" capture="camera" />

Its working fine, but i need to store the filename to my database
and the picture to my server.

Onother thing is that -> <input id="file-input" type="file" name="image" accept="tor/*" capture="camera" />
Gives me a button on mobile, how to use own button for this ?
0
Comment
Question by:team2005
  • 3
4 Comments
 
LVL 11

Accepted Solution

by:
mcnute earned 500 total points
ID: 39248046
For the imagename saving and picture storing on your server you'll need a server side scripting language. The most common is php.

The html for a button  is:

<input type="button" value="Button" />

Open in new window


For a file input with a custom button you'll need javascript. Look the links below:
http://filamentgroup.com/examples/jquery-custom-file-input/
http://filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/
0
 
LVL 2

Author Comment

by:team2005
ID: 39249672
Hi!

This code i find is good. But the image is not stored on my server ?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>HTML5 camera test</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<form>
<input id="file-input" type="file" name="image" accept="image/*" capture="camera" />
</form>
<pre id="output"></pre>
 
<script>
var input = document.getElementById("file-input");
input.addEventListener("change", function(event) {
var file = input.files[0],
img = new Image(),
reader = new FileReader();
 
document.getElementById("output").innerHTML =
file.name + "\n" +
file.type + "\n" +
file.size + " bytes\n";
 
reader.onload = function(event) {
var img = new Image();
img.width = 300;
img.src = event.target.result;
document.body.appendChild(img);
};
reader.readAsDataURL(file);
}, false);
</script>
</body>
</html>

Open in new window

0
 
LVL 2

Author Comment

by:team2005
ID: 39256002
Hi!

Is this not possible ?
0
 
LVL 2

Author Closing Comment

by:team2005
ID: 39354264
thanks
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

778 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question