Improve company productivity with a Business Account.Sign Up

x
?
Solved

How to save picture tacen from mobilen camera to my server

Posted on 2013-06-14
4
Medium Priority
?
525 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 1500 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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

595 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