Upload an image, Display, then write to SQL Server

Question

There are lots of questions regarding uploading images but I cant find a simple straightforward answer to the problem of;

Browse button to select a local image
Upload and display on web page
Write to SQL Server database

Surely this sequence of events must occur a lot on web sites - has anyone got a set of sample code using HTML, JS to upload and display, and PHP to write to the Dbase.

ANy help much appreciated

Phil

Normal practice is not to save the image in the database, but only the path to the image — ChrisW, Jun 17 '12 at 22:48
possible duplicate of [Upload Image to Server using PHP. Store file name in a MYSQL database, with other profile info](http://stackoverflow.com/questions/450876/upload-image-to-server-using-php-store-file-name-in-a-mysql-database-with-othe) — John Conde, Jun 17 '12 at 23:32
Do you want to actually upload an image into the db as a BLOB or simply record a url of the image in a table? Normally images are simply uploaded into a folder and then reference to the image is inserted in the db. There are tons of ready scripts for that. Inserting info in the db if you'renot actually trying to do a BLOB thing is as strightforard as it gets — AR., Sep 23 '14 at 22:55

score 0 · Answer 1 · answered Jun 17 '12 at 22:55

0

I don't know exactly what you mean but here is some example,

Something like this?

PHP code,

<?php
if ($_FILES["file"]["error"] > 0)
  {
  echo "Error: " . $_FILES["file"]["error"] . "<br />";
  }
else
  {
  echo "Upload: " . $_FILES["file"]["name"] . "<br />";
  echo "Type: " . $_FILES["file"]["type"] . "<br />";
  echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
  echo "Stored in: " . $_FILES["file"]["tmp_name"];
  }
  // and here some rest of codes to put into the db
?>

HTML code

<html>
<body>

<form action="" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file" /> 
<br />
<input type="submit" name="submit" value="Submit" />
</form>

</body>
</html>

answered Jun 17 '12 at 22:55

thegrede

492
1
6
18

Thanks for that Chris & thegrede - but what about the Browse button to select the file, and the display of it (if a Graphic) on the page? – user1459408 Jun 18 '12 at 07:06
@user1459408 Have a read of quirksmode.org/dom/inputfile.html - let us know if you have problems implementing the example on that page – ChrisW Jun 18 '12 at 17:27
Had a good look at this and even started to code it - but it seems to be more intent on getting the styling right rather than simply pointing at a graphic file and uploading and dispaying. – user1459408 Jun 19 '12 at 20:33

score 0 · Answer 2 · edited Sep 23 '14 at 22:48

The trick to uploading an image URI to an SQL database involves:

obtaining the URI string from the browser (likely as base64)
breaking the image into pieces (whenever)
Attaching a sequence number to each piece (must correspond to a column in table)
IF not done for you, be sure to encodeURI each piece before request (to deal with "reserved" characters)
This can be done with repeated form submits (use localstorage), with AJAX, or possibly even with websockets.

This is because requests sometimes arrive to the server out of order!

Then, to retrieve the data pieces from the table, SELECT pieces ... order by SEQ_NO, and concatenate the string usually in server side language (e.g. PHP, CF, etc.)

score 0 · Answer 3 · answered Dec 23 '15 at 03:20

Doesn't look like you got answered, though this is for anyone else having similar questions. I think its easier to upload the image content to server and the image name and path in the database for easy retrieval. Also, it does not strain your database and simplifies your code, makes it look tidier, especially when you need to call more than one image, for instance when using a slideshow.

Upload an image, Display, then write to SQL Server

3 Answers3