Hello all, I am developing a form for student profile using html5 and javascript. I need to store the student image in web database. Usually the image file is converted to bytes and then it is stored in database. How can I do this using javascript and html5. How can I convert the image file to byte to store it in web database using javascript. Please help me to do this. Thanks in advance
Javascript is a client side technology and can't do anything on your server. The best it can do is initiate a form submit (or similar using ajax) which triggers a server side process. You can make it look like its all javascript but at some stage you need a script on your server.
Javascript can not do it. You need server side language like php, python, asp, jsp etc. Another thing. Storing image in db is not a good practice. Better store it in a directory that is accessible by apache and store its path in db.
funny that you chose javascript as your username when you appear to not understand the basics. javascript can only send a request to the server. It is your server side script (PHP, ASP, Java, ColdFusion, ROR etc) that will turn the image into bytes and store it in the database. Shiplu is right, though, much better to store it as a regular file and perhaps store info about it (user, date uploaded, caption) in the database.
Thank you very much for your reply Thank you for your reply. I developed a form which includes student details using html5 and javascript. Using html5 and javascript, I did data manipulation and stored it in web sql database. If it is possible to manipulate data and store it in web database using html5 and javascript, it may possible for image file to byte conversion. That's why I asked. Please help me to do it.
Here is the sample coding of html5 and javascript that is used for data manipulation in web sql database =================================================================================== <!DOCTYPE html> <html> <head style="color:red"> <br> <hr size=5 width=450> <center><b><i><h1>DATA MANIPULATION TEST</h1></i></b></center> <hr size=5 width=450> <title >LoginDemo</title> <script language="javascript"> <!-- function initdb() { try { if (window.openDatabase) { db = openDatabase("Trialdb", "1.0", "HTML5 Database", 200000); if (!db) alert("Failed to open the database on disk. This is probably because the version was bad or there is not enough space left in this domain's quota"); } else alert("Couldn't open the database. Please try with a WebKit nightly with this feature enabled"); } catch(err) { } table(); } function table() { db.transaction(function (dbt) { dbt.executeSql("CREATE TABLE IF NOT EXISTS LOGIN (username TEXT, password TEXT)"); }); } function insert(textstring1,textstring2) { initdb(); db.transaction(function(dbt) { dbt.executeSql("INSERT INTO LOGIN(username,password) VALUES(?,?)",[textstring1,textstring2]); }); } function deletion(a,b) { initdb(); db.transaction(function(dbt) { dbt.executeSql("DELETE FROM LOGIN WHERE username=? AND password=?", [a, b]); }); } function update(a,b) { initdb(); db.transaction(function(dbt) { dbt.executeSql("UPDATE LOGIN SET password=? WHERE username=?", [a,b]); }); } // --> </script> </head> <body style="color:white" bgcolor=black ><h3><br> <pre> <form><center> User Name : <input type="text" name="uname"><br> Password : <input type="password" name="psword"><br><br> <input type="button" value="INSERT" onclick="insert(form.uname.value,form.psword.value)"> <input type="button" value="UPDATE" onclick="update(form.psword.value,form.uname.value)"><input type="button" value="DELETE" onclick="deletion(form.uname.value,form.psword.value)"><input type="reset" value="RESET"> </center></form></pre> </h3> </body> </html> ====================================================================================== save it as *.html and execute it in chrome Go to Tools ---> Developer Tools ---> a window will appear ---> Resources there you can see Databases ---> Trialdb -->LOGIN table ---here you can see the inserted records If you know to insert image in the web database as I said above, help me please. Thanks in advance
db = openDatabase("Trialdb", "1.0", "HTML5 Database", 200000); Code (markup): How on earth can that be secure? Intranet use only surely but then you'd still have to worry about disaffected staff! Good to see how it can be done but crikey! after a quick google I found this code for reading the contents of the file [COLOR=#000000][FONT=monospace]var f=new FileReader; [/FONT][/COLOR] f.readAsBinaryString( dt.files[0] ); Code (markup): here's where I found it: http://www.codingforums.com/showpost.php?p=1100553&postcount=3
He's not connecting to a database on any server. He's using the new Web Storage API (HTML5), a client side database (against which you can throw SQL code) is one of the new features (I think that is currently only supported by the webkit engine). You may find the specification here and a more practical example here. As for binary data, Javascript doesn't natively work well with it. If you Google a bit you'll find some classes that are meant to parse binary data. If you want to really dig deep into this issue, check out this article. It's a great start off point. ----- Now taking a step back and taking a "fresh" look at your problem. Have you had the chance to take a look to the canvas element? It has a neat method toDataURL which basically converts the canvas into a Data URI Scheme that can easily be interpreted directly by the browser. Here's a snippet to demonstrate: <html> <head> </head> <body> <script type="text/javascript"> (function() { // Create elements var img = new Image(); var canvas = document.createElement('canvas'); // Set the image source img.src = 'img.jpg'; // When the image loads img.onload = function() { canvas.height = img.height; canvas.width = img.width; var context = canvas.getContext('2d'); context.drawImage(img, 0, 0); // This will hold a base64 representation of the image var dataUri = canvas.toDataURL("image/jpg"); // Append the image to the DOM var newImg = document.createElement('img'); newImg.src = dataUri; document.body.appendChild(newImg); }; })(); </script> </body> </html> Code (markup): Might be a solution.
Talk about reinventing the wheel. You reinvented the concept of round, then created roundness itself, before reinventing the wheel. 1) As Sarah said, use a server-side script to manage the database. If this is a class assignment, you'd get an A for ideation but an F for the code. Whether it works or not, this is not the way it's done. If this is meant to be an actual working site, there are legal issues involved here that you'd need at least a law degree to appreciate. (For starters, writing code that's deliberately prone to releasing private information may be conspiracy to commit a few felonies.) 2) You don't store pictures in a database, you store them as files in the file system (the hard drive). Then you store the path and filename in the database. (Yes, you can "convert the file to bytes" [I put that in quotes because the file is already bytes] and store them in the database. But to use the data you have to convert it back to a file or stream. Lots of unnecessary work, and the filesystem is a loit more efficient in doing that work than the database is.)
Javascript is a client-side scripting language.. saving data on a database is done via server-side scripting such as PHP and ASP. About saving images in the database, it is not really recommended since it will cause a big load to the database. What you can do is upload the image to your server and put the path of that image to the database so you will know what image is needed for that database record.. these links might help you: Handling File Uploads: http://www.tizag.com/phpT/fileupload.php Saving data in the database: http://www.tizag.com/mysqlTutorial/mysqlinsert.php