Multi File (Image) Upload with Jquery PHP and Ajax -
i have form submits multi text fields using ajax, jquery , adds information in database via php without refreshing page. works fine need add images each box. how can submit these images using ajax, jquery php.
this form
<form action="" method="post" enctype="multipart/form-data" id="submitforminfo"> <div id="set1"> <div style="padding: 20px;"> <p>box a</p> <label class="adduserlabelblockfull">title :</label><div class="textinputtextareablock"><input type="text" id="title_a" name="title[]" value="<?= $boxacontent[0]; ?>" class="addusertextinput"></div> <label class="adduserlabelblockfull">text :</label><div class="textinputtextareablock"><textarea name="brieftxt[]" id="brieftxt_a" class="textinputtextarea"><?= $boxacontent[1]; ?></textarea></div> <div class="clearfix"> </div> <div class="clearfix"> </div> <label class="adduserlabelblockfull">page url :</label><div class="textinputtextareablock"><input type="text" id="url_a" name="url[]" value="<?= $boxacontent[2]; ?>" class="addusertextinput"></div> <div class="clearfix"> </div> <label class="adduserlabelblockfull">image :</label><div class="textinputtextareablock"><input type="file" name="file[]" class="addusertextinput"></div> <div class="clearfix"></div> </div> <div class="clearfix"> </div> <div style="background: #999; padding: 20px;"> <p>box b</p> <label class="adduserlabelblockfull">title :</label><div class="textinputtextareablock"><input type="text" id="title_b" name="title[]" value="<?= $boxbcontent[0]; ?>" class="addusertextinput"></div> <label class="adduserlabelblockfull">text :</label><div class="textinputtextareablock"><textarea name="brieftxt[]" id="brieftxt_b" class="textinputtextarea"><?= $boxbcontent[1]; ?></textarea></div> <div class="clearfix"> </div> <div class="clearfix"> </div> <label class="adduserlabelblockfull">page url :</label><div class="textinputtextareablock"><input type="text" id="url_b" name="url[]" value="<?= $boxbcontent[2]; ?>" class="addusertextinput"></div> <div class="clearfix"> </div> <label class="adduserlabelblockfull">image b :</label><div class="textinputtextareablock"><input type="file" name="file[]" class="addusertextinput"></div> <div class="clearfix"> </div> </div> <div class="clearfix"> </div> <div style="padding: 20px;"> <p>box c</p> <label class="adduserlabelblockfull">title :</label><div class="textinputtextareablock"><input type="text" id="title_c" name="title[]" value="<?= $boxccontent[0]; ?>" class="addusertextinput"></div> <label class="adduserlabelblockfull">text :</label><div class="textinputtextareablock"><textarea value="" name="brieftxt[]" id="brieftxt_c" class="textinputtextarea"><?= $boxccontent[1]; ?></textarea></div> <div class="clearfix"> </div> <div class="clearfix"> </div> <label class="adduserlabelblockfull">page url :</label><div class="textinputtextareablock"><input type="text" id="url_c" name="url[]" value="<?= $boxccontent[2]; ?>" class="addusertextinput"></div> <div class="clearfix"> </div> <label class="adduserlabelblockfull">image c :</label><div class="textinputtextareablock"><input type="file" name="file[]" class="addusertextinput"></div> <div class="clearfix"></div> </div> <div class="clearfix"> </div> <div style="background: #999; padding: 20px;"> <p>box d</p> <label class="adduserlabelblockfull">title :</label><div class="textinputtextareablock"><input type="text" id="title_d" name="title[]" value="<?= $boxdcontent[0]; ?>" class="addusertextinput"></div> <label class="adduserlabelblockfull">text :</label><div class="textinputtextareablock"><textarea name="brieftxt[]" id="brieftxt_d" class="textinputtextarea"><?= $boxdcontent[1]; ?></textarea></div> <div class="clearfix"> </div> <div class="clearfix"> </div> <label class="adduserlabelblockfull">page url :</label><div class="textinputtextareablock"><input type="text" id="url_d" name="url[]" value="<?= $boxdcontent[2]; ?>" class="addusertextinput"></div> <div class="clearfix"> </div> <label class="adduserlabelblockfull">image d :</label><div class="textinputtextareablock"><input type="file" name="file[]" class="addusertextinput"></div> <div class="clearfix"> </div> </div> </div> <input type="button" id="addpage" value="save page" class="addnewuserbtn"> </form> i've found bit of code
////////////////////////////////////////////////////////// xhr: function() { var myxhr = $.ajaxsettings.xhr(); if(myxhr.upload){ myxhr.upload.addeventlistener('progress',progress, false); } return myxhr; ////////////////////////////////////////////////////////// and this
////////////////////////////////////////////////////////// function progress(e){ if(e.lengthcomputable){ //this makes nice fancy progress bar $('progress').attr({value:e.loaded,max:e.total}); } } ////////////////////////////////////////////////////////// can 1 me complete function below validates input text fields , file fields, before submits checks see fields not empty, uploads files. i'm not using ie compatibility not issue.
$("#addpage").click(function(){ var form = new formdata($('#submitpage')[0]); $.ajax( url: 'includes/process-category.php', data: form, contenttype: false, processdata: false, type: 'post', }, success: function(msg) { // message sent? show 'thank you' message , hide form if(msg == 'ok') { result = '<div class="notification_ok">the category has been saved. please wait while redirected!</div>'; $('#note').html(result); settimeout(function() { window.location.href = "includes/showcategories.php"; }, 4000); } else { result = msg; $('#note').html(result); } } }); return false; });
Comments
Post a Comment