Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I have an ajax application. It basically uploads images to a folder then PHP grabs them and puts them into an array. From there it is json_encodeded and sent back through echo. alert(responseText) gives me the json version. After I set a variable to json.parse(), with console.log() it comes out fine as an array. The array looks basically like this:

1 IMAGE1.jpg
2 IMAGE2.jpg
3 IMAGE3.jpg
4 IMAGE4.jpg
5 IMAGE5.jpg

etc.

I understand it is now in a javascript/json object. Unfortunately I can't find any information about manipulating this object to grab all the image names and the last array type which is a true success or failure of the upload. Can anyone point me to some documentation or a way to manipulate this and extrapolate the information into an array. In the end i'm trying to dynamically show these images but I am assuming through the upload they do not all have the same name.

So my hope is to grab all .jpg/.png./gif etc. and grab those filenames and then using innerHTML create a bunch of <img> tags with the correct filename using a loop. As well, handling the last piece in the array which is just text saying if the upload was fully successful or not.

Should I not be using JSON? My code is below.

PHP

$dirhandler = opendir(UPLOAD_DIR);
//create handler to directory

//read all the files from directory
$nofiles=0;
while ($file = readdir($dirhandler)) {
    //if $file isn't this directory or its parent
    //echo "FILE SYSTEM: " . $file . "<br/>";
    //add to the $files array
    if ($file != '.' && $file != '..') {
        $nofiles++;
        $files[$nofiles]=$file;
    } //end of if loop
} //end of while loop
//json_encode($files);
if (!$success) { 
    $nofiles++;
    $files[$nofiles] = "Unable to upload file";
    exit;
} else {
    $nofiles++;
    $files[$nofiles] = "File Upload Successfully";
}
echo json_encode($files);

JAVASCRIPT

   if (xhr.readyState === 4 && xhr.status === 200) {
            progressBar.value="100";
            progressText = "Upload Complete!";
            progressStatus.innerHTML = progressText;
            var imageNames = JSON.parse(xhr.responseText);
            alert(imageNames);
        } else if (xhr.readyState === 0 || xhr.readyState === 1) {
            progressBar.value = "25";
            progressText = "Starting Upload..";
            progressStatus.innerHTML = progressText;
        } else if (xhr.readyState === 2) {
            progressBar.value = "50";
            progressText = "Almost Done...";
            progressStatus.innerHTML = progressText;
        } else if (xhr.readyState === 3) {
            progressBar.value = "75";
            progressText = "So Close!";
            progressStatus.innerHTML = progressText;
        } else if (xhr.status === 404 || xhr.status === 500) {
            alert("Your Upload Request failed.");
        }
share|improve this question
I would also like to note. I am not using jQUERY or any other javascript or php libraries. – kmalik Jan 15 at 18:20
Then how are you using JSON.parse? – h2ooooooo Jan 15 at 18:21
2  
JSON.parse is available on any modern browser. – Francis Avila Jan 15 at 18:22
Try console.log(xhr.responseText);, it'll probably look something like [,"Image1",...]: it's an standard JavaScript array after it's been JSON.parsed. Google MDN Array for some documentation on what you can do with JS arrays. The reason the zero-index is empty, btw, is because you increment $nofiles each time before adding an element to the $files array, so the zero'th index remains empty – Elias Van Ootegem Jan 15 at 18:31
add comment (requires an account with 50 reputation)

1 Answer

up vote 0 down vote accepted

imageNames is a nothing-special object--use it like you would use any normal javascript object. E.g.: imageNames[2] will give you the second image name.

However, you life will be much easier if you produce an array that json_encode() will understand as an actual JS array. In your PHP, include an entry for each image instead of using explicit indexes:

$files = array();
$entries = scandir(UPLOAD_DIR);
foreach ($entries as $entry) {
    if (is_file(UPLOAD_DIR.'/'.$entry)) {
        $files[] = $entry;
    }
}
if (!$files) {
    // signal an error with an actual HTTP error code!
    header('Content-Type: application/json', false, 500);
    echo json_encode(array('error'=>'upload failed'));
} else {
    header('Content-Type: application/json');
    echo json_encode($files);
}

However, I suspect that you should be gathering your file names when you process them. Use an upload form with input elements like <input type="file" name="images[]">, then upload to a script with this:

function process_uploaded_files($files, $destdir, $nametmpl) {
    $moved = array();
    foreach ($files['error'] as $key => $error) {
        $newname = FALSE;
        if ($error===UPLOAD_ERR_OK) {
            $source = $files['tmp_name'][$key];
            $destname = sprintf($nametmpl, $key);
            $dest = "{$destdir}/{$destname}";
            if (move_uploaded_file($source, $dest)) {
                // success!
                $newname = $destname;
            }
        }
        $moved[$key] = $newname;
    }
    return $moved;
}

function filename_to_url($filename) {
    // or whatever
    return ($filename) ? '/images/'.$filename : $filename;
}    

$uploaded_files = process_uploaded_files($_FILES['images'], UPLOAD_DIR, 'Image%03d');

// you should always return URLs of resources (not bare filenames) to be RESTful
$new_urls = array_map('filename_to_url', $uploaded_files);
header('Content-Type: application/json');
echo json_encode($new_urls);
share|improve this answer
I tried doing imageNames.length and that did not seem to work. Although I have determined I may have to write a function to get the size of the object as it is not an array. I think that is what held me up. Thank you for your help. – kmalik Jan 15 at 19:47
json_encode will only produce a JS/JSON array ([]) if the PHP array has sequentially-indexed numeric keys starting at 0 without any holes. Otherwise it will produce an object ({}). – Francis Avila Jan 15 at 21:00
That is good to know for next time. Thank you. – kmalik Jan 16 at 2:51
add comment (requires an account with 50 reputation)

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.