Passing a form inputs to a js page and then to processing php page

Question

grozadani2007 0 Newbie Poster

12 Years Ago

Hello there,
This is my form:
<form method="post" enctype="multipart/form-data" action="upload.php">
<input type="text" name="nume" id="nume"/>
<select name="an" id="an" >
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2010">2016</option>
<option value="2011">2017</option>
<option value="2012">2018</option>
<option value="2013">2019</option>
<option value="2014">2020</option>
<option value="2015">2021</option>
</select>
<input type="file" name="images" id="images" multiple />
<button type="submit" id="btn">Upload Files!</button>
</form>
<script src="upload.js"></script>
here is upload.js file:

(function () {
    var input = document.getElementById("images"),
        inputan = document.getElementById("an"),
        inputnume = document.getElementById("nume"),
        formdata = false;



    function showUploadedItem (source) {
        var list = document.getElementById("image-list"),
            li   = document.createElement("li"),
            img  = document.createElement("img");
        img.src = source;
        li.appendChild(img);
        list.appendChild(li);
    }   

    if (window.FormData) {
        formdata = new FormData();
        document.getElementById("btn").style.display = "none";
    }

    input.addEventListener("change", function (evt) {
        document.getElementById("response").innerHTML = "Uploading . . ."
        var i = 0, len = this.files.length, img, reader, file;

        for ( ; i < len; i++ ) {
            file = this.files[i];

            if (!!file.type.match(/image.*/)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.onloadend = function (e) { 
                        showUploadedItem(e.target.result, file.fileName);
                    };
                    reader.readAsDataURL(file);
                }
                if (formdata) {
                    formdata.append("images[]", file);
                }
            }   
        }

        if (formdata) {
            $.ajax({
                url: "upload.php",
                type: "POST",
                data: formdata,
                processData: false,
                contentType: false,
                success: function (res) {
                    document.getElementById("response").innerHTML = res; 
                }
            });
        }
    }, false);
}());

and here is my upload.php file:

<?php

        $an = $_POST['an'];
        $nume = $_REQUEST['nume'];

        foreach ($_FILES["images"]["error"] as $key => $error) {
        if ($error == UPLOAD_ERR_OK) {
        move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "../speed_west/imagini/$an/$nume/" . $_FILES['images']['name'][$key]);
    }
}

echo "<h2>succes...</h2>";

so....in upload.php images it's work just fine but i want to collect values " 'an' and 'nume' " from form and put them in my path ("../speed_west/imagini/$an/$nume/")

Hope so that you understand what i try to do!
Thanks in advances!

javascript php

2 Contributors
3 Replies
292 Views
9 Hours Discussion Span
Latest Post 12 Years Ago Latest Post by grozadani2007

ddymacek 15 Posting Whiz

12 Years Ago

It appears as though you want to upload multiple files. This code will not do that and there are some major issues within it. First off, never, ever, allow user input to create directories on your site. This is really bad practice: move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "../speed_west/imagini/$an/$nume/" . $_FILES['images']['name'][$key]);
2, you should know the name of the directories you are writing to in this case 2010 - 2021, but if you must dynamically generate them... you need to do something like:

<?php
    // upload.php
    $an = $_POST['an'];
    $nume = $_POST['nume'];
    $success = false;
    echo "an = " . $an . "<br />";
    echo "nume = " . $nume . "<br />";
    $error = $_FILES["images"]["error"];    
    echo "error = " . $error . "<br />";
    $KW_max_size=1000000000;
    $extension="";
    if (is_uploaded_file($_FILES['images']['tmp_name'])) { 
        echo "IS FILE " . $_FILES['images']['tmp_name'] . "<br />";
        if(($_FILES['images']['size'] <= $KW_max_size)) { 
            $realname = $_FILES['images']['name']; 
            $ext_array =explode(".",$realname);
            $last_position = count($ext_array) - 1; 
            $extension = $ext_array[$last_position];
            // this is just a check for allowed file extensions you can remove or add anything you wish.
            $extAllowed=array ('txt','gif','GIF','jpg','JPG','jpeg','JPEG','ai','ps','pdf','eps','tif','tiff','psd','qxd','doc','xls','pm6','p65','pmd','sit','zip','pict','ind');
            $ii=count($extAllowed); 
            $flag=0;
            for($i=0;$i<$ii;$i++){ 
                if ($extAllowed[$i]==$extension) {
                    $flag=1;
                }
            }
            $mydir = "../speed_west/imagini/".$an."/";
            //$mydir = "imagini/".$an."/";
            if (!is_dir($mydir)) {              
                echo ("$mydir is not a directory create it now <br />");
                // create the directory
                mkdir($mydir);
            } else {
                echo ("$mydir is a directory, move the file <br />");
            }                           
            echo "EXT flag = " . $flag . "<BR />";
            echo "WOULD CALL move_uploaded_file FUNCTION<BR />";
            if (!move_uploaded_file( $_FILES["images"]["tmp_name"], $mydir.$nume.".".$extension)) {
                echo "failed to move file<br />";
                $success = "failed to move file ".$nume.".".$extension . " to " . $mydir . "<br />";
            } else {
                echo "successfully moved file " . $nume.".".$extension. " <br />";
                $success = "successfully moved file " . $nume.".".$extension. " <br />";
            }

        }
    }
    /*
    foreach ($_FILES["images"]["error"] as $key => $error) {
        if ($error == UPLOAD_ERR_OK) {
            $success = true;
            move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "../speed_west/imagini/$an/$nume/" . $_FILES['images']['name'][$key]);
        }
    }
    */
    echo "<h2>s=".$success."...</h2>";
    echo "<h2><img src=" . $mydir . $nume .".". $extension . "  /><br />";

this will not handle multiple uploads at the current time, that was not explicitly asked in your question.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ddymacek 15 Posting Whiz · Answer 1 · 2012-04-23T18:19:01+00:00

if jquery is available I would highly recommend this script:
http://blueimp.github.com/jQuery-File-Upload/

grozadani2007 0 Newbie Poster · Answer 2 · 2012-04-23T22:13:56+00:00

<?php
// upload.php
$an = $_POST['an'];
$nume = $_POST['nume'];
$success = false;
echo "an = " . $an . "<br />";
echo "nume = " . $nume . "<br />";
$error = $_FILES["images"]["error"];
echo "error = " . $error . "<br />";
$KW_max_size=1000000000;
$extension="";
if (is_uploaded_file($_FILES['images']['tmp_name'])) {
echo "IS FILE " . $_FILES['images']['tmp_name'] . "<br />";
if(($_FILES['images']['size'] <= $KW_max_size)) {
$realname = $_FILES['images']['name'];
$ext_array =explode(".",$realname);
$last_position = count($ext_array) - 1;
$extension = $ext_array[$last_position];
// this is just a check for allowed file extensions you can remove or add anything you wish.
$extAllowed=array ('txt','gif','GIF','jpg','JPG','jpeg','JPEG','ai','ps','pdf','eps','tif','tiff','psd','qxd','doc','xls','pm6','p65','pmd','sit','zip','pict','ind');
$ii=count($extAllowed);
$flag=0;
for($i=0;$i<$ii;$i++){
if ($extAllowed[$i]==$extension) {
$flag=1;
}
}
$mydir = "../speed_west/imagini/".$an."/";
//$mydir = "imagini/".$an."/";
if (!is_dir($mydir)) {
echo ("$mydir is not a directory create it now <br />");
// create the directory
mkdir($mydir);
} else {
echo ("$mydir is a directory, move the file <br />");
}
echo "EXT flag = " . $flag . "<BR />";
echo "WOULD CALL move_uploaded_file FUNCTION<BR />";
if (!move_uploaded_file( $_FILES["images"]["tmp_name"], $mydir.$nume.".".$extension)) {
echo "failed to move file<br />";
$success = "failed to move file ".$nume.".".$extension . " to " . $mydir . "<br />";
} else {
echo "successfully moved file " . $nume.".".$extension. " <br />";
$success = "successfully moved file " . $nume.".".$extension. " <br />";
}
}
}
/*
foreach ($_FILES["images"]["error"] as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
$success = true;
move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "../speed_west/imagini/$an/$nume/" . $_FILES['images']['name'][$key]);
}
}
*/
echo "<h2>s=".$success."...</h2>";
echo "<h2><img src=" . $mydir . $nume .".". $extension . " /><br />";

Thanks for youe answer,
First I allow me to create folders so that only the administrator has access to upload images.
and yes, I forgot to specify that I want to upload multiple images and therefore I try to use java script...
Can you give me some ideas how to use js to do that?
Thanks a lot!