CODEWITHSUNDEEP
javascriptphpjqueryimage
sinrise
sinrise

Reputation: 391

Javascript - Image Upload Preview - Remove the loop so it only submits a single file

I found this script online somewhere (I can't remember where) and it works well, for displaying the preview of an image before it's uploaded. The preview script is intended for multiple files but since I'm also saving data to a database, I need to restrict it to a single file. This script includes a loop that indexes the name of the file input and I'm having trouble targeting it with my php script that uploads the file and saves the data. So, I need to remove the loop so it works with only a single file, then I can give it a "regular" name and target it.

<input type="file" name="files[]" class="file" id="files">
    <output id="list"></output>
    <script type="text/javascript">
        function handleFileSelect(evt) {
            var files = evt.target.files; // FileList object

            // Loop through the FileList and render image files as thumbnails.
            for (var i = 0, f; f = files[i]; i++) {

                // Only process image files.
                if (!f.type.match('image.*')) {
                    continue;
                }
                var reader = new FileReader();

                // Closure to capture the file information.
                reader.onload = (function(theFile) {
                    return function(e) {
                        // Render thumbnail.
                        var span = document.createElement('span');
                        span.innerHTML = ['<img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
                        document.getElementById('list').insertBefore(span, null);
                    };
                })(f);

                // Read in the image file as a data URL.
                reader.readAsDataURL(f);
            }
        }
        document.getElementById('files').addEventListener('change', handleFileSelect, false);
    </script>

Thanks!

Upvotes: 0

Views: 522

Answers (1)

user1318677
user1318677

Reputation: 116

You should be able to give the input element any name you want and the code should still work.

see https://developer.mozilla.org/en-US/docs/Web/API/FileList for more information on the file property

The var files = evt.target.files; Should always an an array. If you really want to remove the loop, try this

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
    // instead of looping. go straight for the first array item
    var f = files[0];
    // Only process image files.
    if (!f.type.match('image.*')) {
        return;
    }
    var reader = new FileReader();

// Closure to capture the file information.
reader.onload = (function(theFile) {
    return function(e) {
        // Render thumbnail.
        var span = document.createElement('span');
        span.innerHTML = ['<img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
        document.getElementById('list').insertBefore(span, null);
        };
    })(f);

    // Read in the image file as a data URL.
    reader.readAsDataURL(f);

}
document.getElementById('files').addEventListener('change', handleFileSelect, false);

Upvotes: 1

Related Questions