Question

我希望在未上传到服务器上的系统浏览后显示多个文件或图像我们可以使用jquery显示这个吗？我瞪着它，发现有办法在服务器上显示和上传：

http://www.dropzonejs.com/

但是。我只想在这里显示图像或文件，还有拖放功能，我们可以使用这个插件。

但是，当我在小提琴中使用这个插件时，它只显示附加文件名而不显示图像为什么？

这是小提琴： http://jsfiddle.net/my50a3uh/1/

<form id="my-awesome-dropzone" action="/target" class="dropzone"></form>
<input type="file" name="file" />

Answer 1

我希望它对你有用。它运行良好。

<强> Live Working Demo

HTML代码：

 <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代码

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);

如何在jquery中浏览多个图像或文件？

1 个答案: