Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Note: I totally reviewed my answer and made it better!</p> <p><strong>HTML</strong></p> <p>First we make a traditional form without a confirm button. Instead we make a button.</p> <pre><code>&lt;form enctype="multipart/form-data" id="myform"&gt; &lt;input type="text" name="some_usual_form_data" /&gt; &lt;br&gt; &lt;input type="file" accept="image/*" multiple name="img[]" id="image" /&gt; &lt;sub&gt;note that you have to use [] behind the name or php wil only see one image&lt;/sub&gt; &lt;br&gt; &lt;input type="button" value="Upload images" class="upload" /&gt; &lt;/form&gt; &lt;progress value="0" max="100"&gt;&lt;/progress&gt; &lt;hr&gt; &lt;div id="content_here_please"&gt;&lt;/div&gt; </code></pre> <p><strong>Javascript/jquery upload side</strong></p> <p>than here is the Javascript.. o yes and Jquery to upload the images and the other form data:</p> <pre><code> $(document).ready(function () { $('body').on('click', '.upload', function(){ // Get the form data. This serializes the entire form. pritty easy huh! var form = new FormData($('#myform')[0]); // Make the ajax call $.ajax({ url: 'action.php', type: 'POST', xhr: function() { var myXhr = $.ajaxSettings.xhr(); if(myXhr.upload){ myXhr.upload.addEventListener('progress',progress, false); } return myXhr; }, //add beforesend handler to validate or something //beforeSend: functionname, success: function (res) { $('#content_here_please').html(res); }, //add error handler for when a error occurs if you want! //error: errorfunction, data: form, // this is the important stuf you need to overide the usual post behavior cache: false, contentType: false, processData: false }); }); }); // Yes outside of the .ready space becouse this is a function not an event listner! function progress(e){ if(e.lengthComputable){ //this makes a nice fancy progress bar $('progress').attr({value:e.loaded,max:e.total}); } } </code></pre> <p><strong>PHP processing side</strong></p> <p>And for those who need the php side to do something with those images here is the php code to loop trough:</p> <pre><code>&lt;?php $succeed = 0; $error = 0; $thegoodstuf = ''; foreach($_FILES["img"]["error"] as $key =&gt; $value) { if ($value == UPLOAD_ERR_OK){ $succeed++; // get the image original name $name = $_FILES["img"]["name"][$key]; // get some specs of the images $arr_image_details = getimagesize($_FILES["img"]["tmp_name"][$key]); $width = $arr_image_details[0]; $height = $arr_image_details[1]; $mime = $arr_image_details['mime']; // Replace the images to a new nice location. Note the use of copy() instead of move_uploaded_file(). I did this becouse the copy function will replace with the good file rights and move_uploaded_file will not shame on you move_uploaded_file. copy($_FILES['img']['tmp_name'][$key], './upload/'.$name); // make some nice html to send back $thegoodstuf .= " &lt;br&gt; &lt;hr&gt; &lt;br&gt; &lt;h2&gt;Image $succeed - $name&lt;/h2&gt; &lt;br&gt; specs, &lt;br&gt; width: $width &lt;br&gt; height: $height &lt;br&gt; mime type: $mime &lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;img src='./upload/$name' title='$name' /&gt; "; } else{ $error++; } } echo 'Good lord vader '.$succeed.' images where uploaded with success!&lt;br&gt;'; if($error){ echo 'shameful display! '.$error.' images where not properly uploaded!&lt;br&gt;'; } echo 'O jeah there was a field containing some usual form data: '. $_REQUEST['some_usual_form_data']; echo $thegoodstuf; ?&gt; </code></pre> <p>live demo at <a href="http://paperboat.tk/test/multiple%20image%20upload%20ajax/">my dev web server which is not always online! </a></p> <p><strong>If you want to compress and resize</strong></p> <p>You need this class:</p> <pre><code>class SimpleImage{ var $image; var $image_type; function load($filename){ $image_info = getimagesize($filename); $this-&gt;image_type = $image_info[2]; if($this-&gt;image_type == IMAGETYPE_JPEG) { $this-&gt;image = imagecreatefromjpeg($filename); } elseif($this-&gt;image_type == IMAGETYPE_GIF) { $this-&gt;image = imagecreatefromgif($filename); } elseif($this-&gt;image_type == IMAGETYPE_PNG) { $this-&gt;image = imagecreatefrompng($filename); } } function save($filename, $image_type=IMAGETYPE_JPEG, $compression=75, $permissions=0777){ if($image_type == IMAGETYPE_JPEG) { $gelukt = imagejpeg($this-&gt;image,$filename,$compression); } elseif($image_type == IMAGETYPE_GIF) { $gelukt = imagegif($this-&gt;image,$filename); } elseif($image_type == IMAGETYPE_PNG) { $gelukt = imagepng($this-&gt;image,$filename); } if($permissions != false) { chmod($filename,$permissions); } return $gelukt; } function output($image_type=IMAGETYPE_JPEG) { if($image_type == IMAGETYPE_JPEG) { imagejpeg($this-&gt;image); } elseif($image_type == IMAGETYPE_GIF) { imagegif($this-&gt;image); } elseif($image_type == IMAGETYPE_PNG) { imagepng($this-&gt;image); } } function getWidth(){ return imagesx($this-&gt;image); } function getHeight(){ return imagesy($this-&gt;image); } function maxSize($width = 1920, $height = 1080){ if(($this-&gt;getHeight() &gt; $height) &amp;&amp; ($this-&gt;getWidth() &gt; $width)){ $ratio = $height / $this-&gt;getHeight(); $newwidth = $this-&gt;getWidth() * $ratio; if($newwidth &gt; $width){ $ratio = $width / $newwidth; $height = $height * $ratio; $newwidth = $width; } $this-&gt;resize($newwidth,$height); return true; } elseif($this-&gt;getHeight() &gt; $height){ $ratio = $height / $this-&gt;getHeight(); $width = $this-&gt;getWidth() * $ratio; $this-&gt;resize($width,$height); return true; } elseif($this-&gt;getWidth() &gt; $width){ $ratio = $width / $this-&gt;getWidth(); $height = $this-&gt;getheight() * $ratio; $this-&gt;resize($width,$height); return true; } return false; } function resizeToHeight($height){ $ratio = $height / $this-&gt;getHeight(); $width = $this-&gt;getWidth() * $ratio; $this-&gt;resize($width,$height); } function resizeToWidth($width){ $ratio = $width / $this-&gt;getWidth(); $height = $this-&gt;getheight() * $ratio; $this-&gt;resize($width,$height); } function scale($scale){ $width = $this-&gt;getWidth() * $scale/100; $height = $this-&gt;getheight() * $scale/100; $this-&gt;resize($width,$height); } function resize($width,$height) { $new_image = imagecreatetruecolor($width, $height); if( $this-&gt;image_type == IMAGETYPE_GIF || $this-&gt;image_type == IMAGETYPE_PNG ) { $current_transparent = imagecolortransparent($this-&gt;image); if($current_transparent != -1) { $transparent_color = imagecolorsforindex($this-&gt;image, $current_transparent); $current_transparent = imagecolorallocate($new_image, $transparent_color['red'], $transparent_color['green'], $transparent_color['blue']); imagefill($new_image, 0, 0, $current_transparent); imagecolortransparent($new_image, $current_transparent); } elseif($this-&gt;image_type == IMAGETYPE_PNG) { imagealphablending($new_image, false); $color = imagecolorallocatealpha($new_image, 0, 0, 0, 127); imagefill($new_image, 0, 0, $color); imagesavealpha($new_image, true); } } imagecopyresampled($new_image, $this-&gt;image, 0, 0, 0, 0, $width, $height, $this-&gt;getWidth(), $this-&gt;getHeight()); $this-&gt;image = $new_image; } } </code></pre> <p>you can use it like this:</p> <pre><code>$succeed = 0; $error = 0; $thegoodstuf = ''; foreach($_FILES["img"]["error"] as $key =&gt; $value) { if ($value == UPLOAD_ERR_OK){ $succeed++; $name = $_FILES["img"]["name"][$key]; $image = new SimpleImage(); $image-&gt;load($_FILES['img']['tmp_name'][$key]); $chek = $image-&gt;maxSize(); if($chek){ $move = $image-&gt;save('./upload/'.$name); $message= 'Afbeelding verkleind naar beter formaat!&lt;br&gt;'; } else{ $move = copy($_FILES['img']['tmp_name'][$key], './upload/'.$name); #$move = move_uploaded_file($_FILES['img']['tmp_name'][$key], './upload/'.$name); $message= ''; } if($move){ $arr_image_details = getimagesize('./upload/'.$name); $width = $arr_image_details[0]; $height = $arr_image_details[1]; $mime = $arr_image_details['mime']; $thegoodstuf .= " &lt;br&gt; &lt;hr&gt; &lt;br&gt; &lt;h2&gt;Image $succeed - $name&lt;/h2&gt; &lt;br&gt; specs, &lt;br&gt; $message width: $width &lt;br&gt; height: $height &lt;br&gt; mime type: $mime &lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;img src='./upload/$name' title='$name' /&gt; "; } else{ $error++; } } else{ $error++; } } echo 'Good lord vader '.$succeed.' images where uploaded with success!&lt;br&gt;'; if($error){ echo 'shameful display! '.$error.' images where not properly uploaded!&lt;br&gt;'; } echo 'O jeah there was a field containing some usual form data: '. $_REQUEST['some_usual_form_data']; echo $thegoodstuf; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POupload multiple images with jquery ajax and process them with php
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USbotenvouwer
    1. USbotenvouwer
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POupload multiple images with jquery ajax and process them with php
      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. VTAcceptedByOriginator
    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. VTUpMod
    1. COIsn't this code from net.tusplus.com? http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/
      singulars
      1. PO
      1. USlocalhost
    2. COYes it is and by the way if you are looking how to upload multiple images with ajax I already improved my code so if you are interested I re-post the new code.
      singulars
      1. PO
      1. USbotenvouwer
    3. COThat would be nice
      singulars
      1. PO
      1. USlocalhost
 

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