Multiple image upload with form data in ajax and php
------------------------------------------------------------------------------------------------- http://ephptutorial.wordpress.com?discussion_id=1
var pathname = $(location).attr('href');//to get id from url
var page_id = (pathname.split('='));
page_id = page_id[1];//To get the id by javascript -----------------------------------------------------------------------------------------------------------
<html> <head> <title>ephptutorial.wordpress.com form data with mutiple image upload in ajax</title> </head> <body> <script type='text/javascript' src='js/jquery-1.5.2.min.js'></script> <form id="data" method="post" enctype="multipart/form-data"> <div contenteditable="true" placeholder="dadawdawdawwwwwwwwwww" name="input" id="input" style="height: 50px; width: 500px; border: 5px solid #D6D6D6;"></div> <input type="text" name="first" value="Bob" /> <input type="text" name="middle" value="James" /> <input type="text" name="last" value="Smith" /> <input name="imageone[]" type="file" id ="files" multiple="true"/> <button>Submit</button> </form><div></div> <script> $(document).ready(function(){ $("form#data").submit(function(){ var first = $(this[name="first"] ).val(); var middle = $(this[name="middle"] ).val(); var last = $(this[name="last"] ).val(); var val=$("#input").html();//to get div content value var pathname = $(location).attr('href');//to get id from url var page_id = (pathname.split('=')); page_id = page_id[1]; var formData = new FormData(); // mutiple image append code var input = document.getElementById('files'); for(x=0;x < input.files.length;x++){ formData.append('imageone[]',input.files[x]); } formData.append('msg',val); formData.append('page_id',page_id); formData.append('first',first); formData.append('middle',middle); formData.append('last',last); $.ajax({ url: "sample_upload.php", cache: false, contentType: false, processData: false, type: "POST", data: formData, success: function(html) { $(".cmts-wrapper").prepend(html); }, error: function(html){ alert(html); } }); return false; }); }); </script> </body> </html>------------------------------------------------------------------------------------------ sample_upload.php
function osc_genRandomPassword($length = 8) {
$dict = array_merge(range('a', 'z'), range('0', '9'), range('A', 'Z'));
shuffle($dict);
$pass = '';
for ($i = 0; $i < $length; $i++)
$pass .= $dict[rand(0, count($dict) - 1)];
return $pass;
}
echo 'first name :' . $_POST['first'] . '';
echo 'middle name:' . $_POST['middle'] . '';
echo 'last name:' . $_POST['last'] . '';
echo 'div msg:' . $_POST['msg'] . '';
echo 'url discussion:' . $_POST['page_id'] . '';
foreach ($_FILES["imageone"]["error"] as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
$name = $_FILES["imageone"]["name"][$key];
$temp = $_FILES["imageone"]["tmp_name"][$key];
$ext = substr(strrchr($name, "."), 1);
$randName = osc_genRandomPassword();
$myfile = $randName . '.' . $ext;
$location = "upload/$myfile";
move_uploaded_file($temp, $location);
echo '<img alt="" src="' . $location . '" />';
}
}
?>
Comments
Post a Comment