Multiple image upload with form data in ajax and php


Multiple image upload with form data in ajax and php

Argonne Nimbus aids Brookhaven’s STAR Experiment (Photo credit: Argonne National Laboratory)

————————————————————————————————-

https://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
<!–?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 . '" />';
 }
 }
 ?>

if the post useful to you then donate just by clicking the link http://adf.ly/MMZbv

Advertisements
About

myself pramodh kumar yet another php developer from India and have worked on oops,procedural,yii framework,codeigniter,wordpress,joomla,api and more.

Tagged with: , , , , , , , , , , , , , , , , , , ,
Posted in Multiple image upload with form data in ajax and php
One comment on “Multiple image upload with form data in ajax and php

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow php tutorial on WordPress.com
categories
Calendar
March 2013
M T W T F S S
« Jan   Apr »
 123
45678910
11121314151617
18192021222324
25262728293031
Follow me on Twitter
Blog Stats
  • 74,607 hits
%d bloggers like this: