0

I want to show multiple files or images after browse from system not uploaded on server can we show this using jquery? I goggled it and find there is way to show and upload on server:

http://www.dropzonejs.com/

But. I only want to show images or file in this there is drag and drop functionality also present can we use this plugin.

But, when I use this plugin in fiddle it show only attached file name not display image why?

Here is fiddle: http://jsfiddle.net/my50a3uh/1/

<form id="my-awesome-dropzone" action="/target" class="dropzone"></form>
<input type="file" name="file" />
Pallavi Sharma
  • 635
  • 2
  • 16
  • 45
  • Check the console that fiddle throws "Uncaught SyntaxError: Unexpected token < " in `dropzone.js` so I'm guessing it doesn't work in jsfiddle. Some thing do not work if not supported by jsfiddle, try somewhere else. – GillesC Sep 06 '14 at 11:03
  • @gillesc I remove this error but one error again come http://jsfiddle.net/my50a3uh/1/ ..requre is undefined – Pallavi Sharma Sep 06 '14 at 11:11
  • @PallaviSharma, it seems that `RequireJS` is missing from the client side. Here's a solution for that issue: http://stackoverflow.com/questions/19059580/client-on-node-uncaught-referenceerror-require-is-not-defined – Newtt Sep 06 '14 at 11:28
  • U should email Matias meno the creator. – Academia Sep 06 '14 at 12:26

1 Answers1

0

I hope it may be useful for you.It is running well.

Live Working Demo

HTML Code:

 <form enctype="multipart/form-data" method="post" action="upload.php">
    <div class="row">
      <label for="fileToUpload">Select Files to Upload</label><br />
      <input type="file" name="filesToUpload[]" id="filesToUpload"  multiple="multiple"  />
      <output id="filesInfo"></output>
    </div>
    <div class="row">
      <input type="submit" value="Upload" />
    </div>
  </form>

JS Code

function fileSelect(evt) {
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        var files = evt.target.files;

        var result = '';
        var file;
        for (var i = 0; file = files[i]; i++) {
            // if the file is not an image, continue
            if (!file.type.match('image.*')) {
                continue;
            }

            reader = new FileReader();
            reader.onload = (function (tFile) {
                return function (evt) {
                    var div = document.createElement('div');
                    div.innerHTML = '<img style="width: 90px;" src="' + evt.target.result + '" />';
                    document.getElementById('filesInfo').appendChild(div);
                };
            }(file));
            reader.readAsDataURL(file);
        }
    } else {
        alert('The File APIs are not fully supported in this browser.');
    }
}

document.getElementById('filesToUpload').addEventListener('change', fileSelect, false);
Kalu Singh Rao
  • 1,671
  • 1
  • 16
  • 21