Click here to Skip to main content
14,545,399 members
Rate this:
Please Sign up or sign in to vote.
See more:
I am devloping application in mvc3 and i want to used html5 based file upload option where i can show file size,thumbnails of selected file at client side and progress bar....
my code is follw...its perfectly work on mozilla but on google crome thumbnails functionality not working...please help me...
<!DOCTYPE html>
<html>
<body>
    <style>
  .thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }
</style>

<input type="file" id="files" name="files[]" multiple />
<div id="list"></div>
<div id="size"></div>

<script>
    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++) {
            var siz = document.createElement('div');
            siz.innerHTML = [f.name,f.size].join('');
            document.getElementById('size').insertBefore(siz, null);
            // Only process image files.
            if (!f.type.match('image.*')) {
                continue;
            }

            var reader = new FileReader();

            // Closure to capture the file information.
            reader.onload = (function (theFile) {
              //  alert("hii");
                return function (e) {
                    alert("hii inside return");
                    // Render thumbnail.
                    var span = document.createElement('span');
                    span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', 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>
</body>
</html>
Posted
Updated 24-Nov-11 2:57am
v2
Comments
   
Not a question.
--SA
vishal_h 24-Nov-11 8:58am
   
i updated my question...thanks..

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100