1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to save image in web sql database using javascript

Discussion in 'JavaScript' started by javascript, Dec 4, 2011.

  1. #1
    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, Dec 4, 2011 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #2
    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.
     
    sarahk, Dec 4, 2011 IP
  3. jenokz

    jenokz Greenhorn

    Messages:
    46
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #3
    convert it to bytes ? care to explain ?
     
    jenokz, Dec 5, 2011 IP
  4. javascript

    javascript Guest

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    how to convert image file to byte using javascript. please explain
     
    javascript, Dec 6, 2011 IP
  5. Shiplu

    Shiplu Peon

    Messages:
    42
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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.
     
    Shiplu, Dec 6, 2011 IP
  6. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #6
    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.
     
    sarahk, Dec 6, 2011 IP
  7. javascript

    javascript Guest

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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.
     
    Last edited: Dec 6, 2011
    javascript, Dec 6, 2011 IP
  8. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #8
    How did you do that if you didn't have a server side script?
     
    sarahk, Dec 7, 2011 IP
  9. javascript

    javascript Guest

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    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
     
    javascript, Dec 7, 2011 IP
  10. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #10
    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
     
    sarahk, Dec 8, 2011 IP
  11. proactiv3

    proactiv3 Peon

    Messages:
    55
    Likes Received:
    7
    Best Answers:
    4
    Trophy Points:
    0
    #11
    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.
     
    proactiv3, Dec 8, 2011 IP
    sarahk likes this.
  12. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #12
    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.)
     
    Rukbat, Dec 10, 2011 IP
  13. javascript

    javascript Guest

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13

    Thank you for your information:)
     
    javascript, Dec 11, 2011 IP
  14. JohnnySchultz

    JohnnySchultz Peon

    Messages:
    277
    Likes Received:
    4
    Best Answers:
    7
    Trophy Points:
    0
    #14

    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
     
    JohnnySchultz, Dec 12, 2011 IP