I'm recently trying to upload images without page refreshing. To do that I had identify ajax. My server side programing language is php. So I tried and success with it, but it's refreshing page. So I change that code after do research. But it shows error. Please help me with this.

This is my html form and it's file name is index.php

<form method="post" enctype="multipart/form-data" id="formUploadFile">
            <label>Select single file to upload:</label>
            <input type="file" name="files[]" multiple="multiple" />
            <input type="submit" value="Upload File" name="btnSubmit"/>

In the same index.php page I opened <script></script> tag and put following code.

    $(document).ready(function (e) {
        $('#formUploadFile').on('submit', function(e) {
                url: "up",
                type: "POST",
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                success: function(data)

In above ajax post request it sends data to up.php file which is in the same directory. And it's code is this,

function random_string($length) {
    $key = '';
    $keys = array_merge(range(0, 9), range('a', 'z'));

    for ($i = 0; $i < $length; $i++) {
        $key .= $keys[array_rand($keys)];

    return $key;

    $errors = array();
    $uploadedFiles = array();
    $extension = array("jpeg","jpg","png","gif");
    $bytes = 1024;
    $KB = 1024;
    $totalBytes = $bytes * $KB;
    $UploadFolder = "UploadFolder";

    $counter = 0;

    foreach($_FILES["files"]["tmp_name"] as $key=>$tmp_name){
        $temp = $_FILES["files"]["tmp_name"][$key];
        $name = $_FILES["files"]["name"][$key];


        $UploadOk = true;

        if($_FILES["files"]["size"][$key] > $totalBytes)
            $UploadOk = false;
            array_push($errors, $name." file size is larger than the 1 MB.");

        $ext = pathinfo($name, PATHINFO_EXTENSION);
        if(in_array($ext, $extension) == false){
            $UploadOk = false;
            array_push($errors, $name." is invalid file type.");

        if(file_exists($UploadFolder."/".$name) == true){
            $UploadOk = false;
            array_push($errors, $name." file is already exist.");

        if($UploadOk == true){
            array_push($uploadedFiles, $name);

            echo "<b>Errors:</b>";
            echo "<br/><ul>";
            foreach($errors as $error)
                echo "<li>".$error."</li>";
            echo "</ul><br/>";

            echo "<b>Uploaded Files:</b>";
            echo "<br/><ul>";
            foreach($uploadedFiles as $fileName)
                echo "<li>".$fileName."</li>";
            echo "</ul><br/>";

            echo count($uploadedFiles)." file(s) are successfully uploaded.";
        echo "Please, Select file(s) to upload.";
    echo 'data not comes from ajax or html form';

I tried this and even try after celan browser cache. Each time it show 'data not comes from ajax or html form' message in the console of browser. Which I put end of the above php file. In any case if it is ((!isset($_POST))).

Please guys help me to figure out what's wrong with this.

Without reading your code (because it's a lot to process), file uploads are not possible through AJAX alone. Apparently, browsers believe there is a security vulnerability of some type and prohibit it from working. In the past, we used a workaround with iframes to mimic AJAX file uploads. Today, we use https://www.dropzonejs.com/ which has native AJAX support.

commented: thank you ! +0
Be a part of the DaniWeb community

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