jquery - Image File upload with thumbnail preview - like Zurb - not Working? -


here's have:

i trying implement zurb file uploader, having trouble getting file upload. wondering if there upload.php file. site runs on wordpress , form working part of user profile creation process.

here's want do:

-upload image file part of larger form

-the file must go in custom folder , can stored there during profile process (which mat take few minutes user input information).

-preview image file thumbnail

here jq:

$(document).ready(function(){  var thumb = $('img#thumb');   new ajaxupload('imageupload', {     action: $('form#newhotnessform').attr('action'),     name: 'userfile',     onsubmit: function(file, extension) {         $('div.preview').addclass('loading');     },     oncomplete: function(file, response) {         thumb.load(function(){             $('div.preview').removeclass('loading');             thumb.unbind();         });         thumb.attr('src', response);     } }); 

});

here html:

<div class="preview"> <img id="thumb" width="50px" height="50px" src="<?php bloginfo('template_url'); ?>/images/thumbnail.png" /> </div> <span class="wrap hotness"> <form id="newhotnessform" action="<?php bloginfo('template_url'); ?>/upload.php" enctype='multipart/form-data'>                          <input type="file" id="imageupload" size="20" accept="image/*"/>     <label>upload image</label> </form> 

here upload.php file:

$allowedexts = array("gif", "jpeg", "jpg", "png"); $extension = end(explode(".", $_files['userfile']["name"])); if ((($_files['userfile']["type"] == "image/gif")  || ($_files['userfile']["type"] == "image/jpeg")  || ($_files['userfile']["type"] == "image/jpg")  || ($_files['userfile']["type"] == "image/png"))  && ($_files['userfile']["size"] < 20000000)  && in_array($extension, $allowedexts)) {   if ($_files['userfile']["error"] > 0)     {     echo "return code: " . $_files['userfile']["error"] . "<br>";     }   else     { echo "upload: " . $_files['userfile']["name"] . "<br>"; echo "type: " . $_files['userfile']["type"] . "<br>"; echo "size: " . ($_files['userfile']["size"] / 1024) . " kb<br>"; echo "temp file: " . $_files['userfile']["tmp_name"] . "<br>";  if (file_exists("http://mysite.com/wp-content/themes/mytheme/uploads/" . $_files['userfile']["name"]))   {   echo $_files['userfile']["name"] . " exists. ";   } else   {   move_uploaded_file($_files['userfile']["tmp_name"], "http://mysite.com/wp-content/themes/mytheme/uploads/" . basename($_files['userfile']['name']));   echo "stored in: " . "http://mysite.com/wp-content/themes/mytheme/uploads/" . $_files['userfile']["name"];    }  } } else {echo "invalid file";} 

i'm wondering if missing here.

thank you.

set name of file form element posted server. in case html code should be:

<input type="file" id="imageupload" name="userfile" size="20" accept="image/*"/> 

Comments

Popular posts from this blog

node.js - Bad Request - node js ajax post -

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -