I want to make it possible to upload profile-pictures via jQuery's AJAX-function. This means, that when input[type="file"] changes, I want it to actually post the form and send the data to my PHP script. My code right now is:
<script type="text/javascript"> $(document).ready(function(){ $("#profileUpload").on('change', 'input[name="profilepic"]', function(){ $("#profileUpload input[type='file']").attr('disabled','disabled'); $("#picLoader").css('display','block'); $.ajax({ type: "POST", dataType: "json", url: "edit/uploadProfilePicture", // URL of the Perl script data: {profile_pic: $("input[name='profilepic']").val()}, // script call was successful // data contains the JSON values returned by the Perl script success: function(data){ if (data.error) { } else { } $("#picLoader").css('display','none'); } // success }); // ajax return false; }); }); </script> <form action="" method="post" class="form-horizontal" id="profileUpload" role="form" enctype="multipart/form-data"> <div class="form-group profilepic"> <label for="create_Profile" class="col-lg-3 control-label">Profilbillede</label> <div class="col-lg-9"> <div style="position: relative; display: block; float: left;"> <?php if(empty($profile_pic)): ?> <div style="z-index:10;"> <img src="<?= BASE_HTTP_PATH; ?>/public/img/default/no-profile-pic.png" id="profPic" style="width: 63px; float: left; margin: 0 10px 0 0;" /> </div> <?php else: ?> <div style="z-index:10;"> <img src="<?= BASE_HTTP_PATH; ?>/public/img/default/nopic.png" id="profPic" style="width: 63px; float: left; margin: 0 10px 0 0;" /> </div> <?php endif; ?> <div id="picLoader" style="position: relative; display: none; width: 63px; height: 68px; z-index: 100;"> <div style="position: absolute; top: 0; opacity: 0.3; background: #dfdfdf; width: 63px; height: 68px; z-index: 100;"> </div> <img src="<?= BASE_HTTP_PATH; ?>/public/img/default/ajax-loader.gif" style="position: absolute; top: 28px; left: 24px; z-index: 101;"> </div> </div> <div style="position: relative; display: block; float: left;"> <input type="file" id="create_Profile" name="profilepic" placeholder="Vælg profilbillede" style="float: left;" /> </div> <br style="clear: both;"> </div> </div> </form> The problem is, that I don't know how to make a child of the form post the form and "fire" the AJAX-request correctly. Can anyone help?
Thanks in advance :)
