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

Popular posts from this blog

create pdf by using javascript

By using jspdf library which generates PDF files using java script.You can download library from http://jspdf.com/ after downloading  the library create a html or php file in example folder and paste below code.It already as many examples. but sharing this code ,because we can,t add edit or alter code.but we can add function to work according to our condition.because we can replace or change other option in saveondisk button.one more think we can add php variable in it to create pdf file with php content. <!doctype> <html> <head>     <title>jsPDF</title>     <link rel="stylesheet" type="text/css" href="css/main.css">      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>      <script type="text/javascript" src="../libs/downloadify/js/swfobject.js"></script>     <script type="text/javascript" src="
Read more

yii framework simple shopping cart tutorial for beginners

Provides shpping cart functionality for models. Cart is a container object that holds items collection and have handy methods to work with it. It uses user session as a cart data storage. Installing and configuring 1 way: Registration in the config file Add to protected/config/main.php : [php] 'import'=>array( 'ext.yiiext.components.shoppingCart.*' ), 'components' => array( 'shoppingCart' => array( 'class' => 'ext.yiiext.components.shoppingCart.EShoppingCart', ), ) 2 way: Registration by necessity [php] $cart = Yii::createComponent(array( 'class' => 'ext.yiiext.components.shoppingCart.EShoppingCart' )); //Important! $cart->init(); $book = Book::model()->findByPk(1); $cart->put($book); Preparing a model Models that you are planning to put into the cart should implement IECartPosition interface: [php] class Book extends CActiveRecord implements IECartPosit
Read more

yii2 arrayhelper::map vs array_map

Recently i was working on YII2 project in which i came across arrayhelper::map() and was thinking alternate in php. so i used array_map() also tested the performance of both in yii2 by start time and end time for both ,surprising was that execution time remain same.please let me know if there is any alternate that will execute faster then arrayhelper::map(). Adding the code in yii2: function find_field($value){ $value['id'] = $value['name']; return $value['id']; } $array = ['1'=>['id'=>1,'name' =>"pramodh",'address' =>'45 vk street','loc'=>'cbe'],'2'=>['id'=>2,'name' =>"pramodh kumar",'address' =>'45343 vk street','loc'=>'pune']]; $a = array_map(array($this,'find_field'),$array); print_r($a); yii2 code: $list = ArrayHelper::map($array,  ' id ' ,  
Read more