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
Post a Comment