Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>It's not too hard. Firstly, take a look at <a href="http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface" rel="noreferrer">FileReader Interface</a>.</p> <p>So, when the form is submitted, catch the submission process and</p> <pre><code>var file = document.getElementById('fileBox').files[0]; //Files[0] = 1st file var reader = new FileReader(); reader.readAsText(file, 'UTF-8'); reader.onload = shipOff; //reader.onloadstart = ... //reader.onprogress = ... &lt;-- Allows you to update a progress bar. //reader.onabort = ... //reader.onerror = ... //reader.onloadend = ... function shipOff(event) { var result = event.target.result; var fileName = document.getElementById('fileBox').files[0].name; //Should be 'picture.jpg' $.post('/myscript.php', { data: result, name: fileName }, continueSubmission); } </code></pre> <p>Then, on the server side (i.e. myscript.php):</p> <pre><code>$data = $_POST['data']; $fileName = $_POST['name']; $serverFile = time().$fileName; $fp = fopen('/uploads/'.$serverFile,'w'); //Prepends timestamp to prevent overwriting fwrite($fp, $data); fclose($fp); $returnData = array( "serverFile" =&gt; $serverFile ); echo json_encode($returnData); </code></pre> <p>Or something like it. I may be mistaken (and if I am, please, correct me), but this should store the file as something like <code>1287916771myPicture.jpg</code> in <code>/uploads/</code> on your server, and respond with a JSON variable (to a <code>continueSubmission()</code> function) containing the fileName on the server.</p> <p>Check out <a href="http://us2.php.net/manual/en/function.fwrite.php" rel="noreferrer"><code>fwrite()</code></a> and <a href="http://docs.jquery.com/Post" rel="noreferrer"><code>jQuery.post()</code></a>.</p> <p>On the above page it details how to use <a href="http://dev.w3.org/2006/webapi/FileAPI/#readAsBinaryString" rel="noreferrer"><code>readAsBinaryString()</code></a>, <a href="http://dev.w3.org/2006/webapi/FileAPI/#readAsDataURL" rel="noreferrer"><code>readAsDataUrl()</code></a>, and <a href="http://dev.w3.org/2006/webapi/FileAPI/#readAsArrayBuffer" rel="noreferrer"><code>readAsArrayBuffer()</code></a> for your other needs (e.g. images, videos, etc).</p>
    singulars
    1. This table or related slice is empty.
    1. POUsing HTML5 file uploads with AJAX and jQuery
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USclarkf
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POUsing HTML5 file uploads with AJAX and jQuery
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COHey Clark, am I understanding correctly? This will send the uploaded file as soon as it's loaded into the FileReader constructor from the file system, bypassing jQuery's low-level .ajax handler. Then the rest of the form will submit as normal?
      singulars
      1. PO
      1. USJoshua Cody
    2. COAll right, so I was wrong in my understanding before. Now I'm taking the readAsDataUrl of an image, adding it to my datastring in .ajax, and submitting all my info together. My previous solution involved CodeIgniter's default file input class which grabbed data from $_FILES['field'], so it looks like I'll need to switch to a different solution for parsing the base64 image data. Any advice on that is welcomed, upvoting your answer here, and once I finish implementation, I'll mark it as correct.
      singulars
      1. PO
      1. USJoshua Cody
    3. CO@Joshua Cody - I updated the answer to give a little more detail. You'll have to forgive that I haven't used CodeIgniter in many moons and couldn't tell you how to integrate this into their codebase. I'm not sure why you need to upload the file before submission, but this should at least give you a clue. (You could also insert the image into a database if that's better for you).
      singulars
      1. PO
      1. USclarkf
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload