mutiple upload with form data php ajax

multiple image upload with form data in ajax and php

Example :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
<?php