Is it possible to upload image to the server using Bootstrap's Modal dialog box, jQuery, AJAX and PHP? If yes how? If no what's the reason for it? -



Is it possible to upload image to the server using Bootstrap's Modal dialog box, jQuery, AJAX and PHP? If yes how? If no what's the reason for it? -

i'm using php, jquery(jquery-1.9.1.min.js , jquery-ui-1.10.0.custom.min.js), ajax, bootstrap design framework(bootstrap v3.0.0), etc.

i'm relatively newbie in field of web programming.

now @ 1 place want show bootstrap framework's inbuilt modal dialog box on click of button. in modal dialog box there html file command uploading image file. user select image file his/her local machine browsing files. after performing next necessary validations

proper standard image extension maximum size limit of 5 mb minimum dimensions of 940 px * 370 px

the file should uploaded server using php code. if of validations fail relevant error message should displayed in reddish color above file upload html control.

is possible accomplish functionality? heard it's not possible upload files using ajax. don't know whether it's myth or fact. if knows thing please explain me in detail.

yes, it's possible. here's started.

note: uses php class class.upload.php uploading images. (http://www.verot.net/php_class_upload.htm)

all of code has been tested , works. whipped up, it's pretty basic should point in right direction. you'll need sanitize inputs, right messaging, etc.

just create file (index.html) , copy/paste html , javascript it. create file post.php , set php in it. download class.upload.php script , create directory named uploads. give appropriate permissions (0755 or 0777). maintain in same folder example. should go.

it's possible set success , error messages right in modal. i'm using alert() here brevity. if want set messages in modal, create <div> in modal, give id , target id in jquery i'm using alert(). it's pretty easy.

edit: added messaging example. :)

here's html , jquery (index.html)

<!doctype html> <html> <head> <title>upload photo</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <!--[if lt ie 9]> <script src="//oss.maxcdn.com/libs/html5shiv/r29/html5.min.js"></script> <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <button class="btn btn-primary" data-toggle="modal" data-target="#mymodal">open modal</button> <div class="modal fade" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <form id="form" enctype="multipart/form-data" role="form"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">close</span></button> <h4 class="modal-title">upload photo</h4> </div> <div class="modal-body"> <div id="messages"></div> <input type="file" name="file" id="file"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> <button type="submit" class="btn btn-primary">save</button> </div> </form> </div> </div> </div> </div> <script src="http://code.jquery.com/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script> $('#form').submit(function(e) { var form = $(this); var formdata = false; if(window.formdata){ formdata = new formdata(form[0]); } var formaction = form.attr('action'); $.ajax({ type : 'post', url : 'post.php', cache : false, info : formdata ? formdata : form.serialize(), contenttype : false, processdata : false, success: function(response) { if(response != 'error') { //$('#messages').addclass('alert alert-success').text(response); // op requested close modal $('#mymodal').modal('hide'); } else { $('#messages').addclass('alert alert-danger').text(response); } } }); e.preventdefault(); }); </script> </body> </html>

and php script (post.php)

<?php require_once 'class.upload.php'; $handle = new upload($_files['file']); $handle->allowed = 'image/*'; if($handle->uploaded) { $handle->process('uploads'); if($handle->processed) { echo 'image uploaded'; } else { echo 'error'; } }

php jquery ajax twitter-bootstrap-3 image-uploading

Comments

Post a Comment

Popular posts from this blog

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* -

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* - i've inherited doc publishing process takes docbook , builds html , pdf output, using apache fop both. project had been started, never completed. lots of tweaking, i've able of doc sets build (20+), except handful, , fail severe code 1 of these 2 conditions: "fo:flow" missing kid elements. required content model: marker* "fo:block" not valid kid of "fo:root" the xml output comes out of docbook , docbook-fop checks out well-formed. the fop error in 1 book, "endecagloss", example, points end of string: <fo:flow flow-name="xsl-region-body" start-indent="4pc" end-indent="0pt"/> here’s log output in case: [java] severe: javax.xml.transform.transformerexception: file:/scratch/publishing/hudson/jobs/build-main-endeca-documentation/workspace/serverdoc/w...
Read more

mediawiki - How do I insert tables inside infoboxes on Wikia pages? -

mediawiki - How do I insert tables inside infoboxes on Wikia pages? - i want insert tables in infoboxes. example, have proteinbox i've developed using infobox template (http://health-and-medicine.wikia.com/wiki/template:proteinbox), , fasta field big fit comfortably in proteinbox. hence collapsible table within box. this tried: {{infobox | row 1 = {| class = "mw-collapsible mw-collapsed wikitable" |- | <!-- table content --> |} }} your problem is, putting nested table within template. pipe characters ( | ) in table syntax collides pipe usage in templates. the commonly used hack around create template called template:! , containing pipe character, , utilize when need set tables, parser functions or other stuff using pipe characters, within templates. table (with every | replaced {{!}} ): {{{!}} {{!}}- {{!}} a1 {{!}} b1 {{!}}- {{!}} a2 {{!}} b2 {{!}}} ...the equivalent of {| |- | a1 | b1 |- | a2 | b2 |} furthermore, hav...
Read more

Local Service User Logged into Windows -

Local Service User Logged into Windows - i created windows service tracks app server user connected through load balancer. it retrieves user logged windows on machine, cross references active directory (ad) business relationship homecoming first name, lastly name , e-mail (for notification through website created project) there 1 scheme on network users remote system, vista system, reason returning values "local service" logged machine, it's weird , security guys impossible "local service" business relationship logged windows. here how user logged windows managementscope ms = new managementscope("\\\\.\\root\\cimv2"); objectquery query = new objectquery("select * win32_computersystem"); managementobjectsearcher searcher = new managementobjectsearcher(ms, query); foreach (managementobject mo in searcher.get()) { _username = mo["username"].tostring(); } // remove domain part username string[] usernameparts = _...
Read more