如何瀏覽jQuery中的多個圖像或文件？

我想要顯示多個文件或圖像後瀏覽系統沒有上傳到服務器上，我們可以使用jquery顯示這個？我瞪大眼睛，並發現有方式來顯示和上載服務器：如何瀏覽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" />

來源

2014-09-06 Pallavi Sharma

檢查擺弄拋出控制檯「未捕獲的SyntaxError：意外的標記<」在'懸浮窗.js'所以我猜它不'在jsfiddle中工作。有些東西如果不支持jsfiddle就不行，請嘗試其他地方。 – GillesC 2014-09-06 11:03:45

@gillesc我刪除這個錯誤，但再次出現一個錯誤http://jsfiddle.net/my50a3uh/1/ ..requre是undefined – 2014-09-06 11:11:33

@PallaviSharma，似乎'RequireJS'從客戶端丟失。以下是針對該問題的解決方案：http://stackoverflow.com/questions/19059580/client-on-node-uncaught-referenceerror-require-is-not-defined – Newtt 2014-09-06 11:28:58

我希望它可能是有用you.It運行良好。

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

來源

2014-09-06 11:53:52 Developer

它不工作..！當我瀏覽時沒有顯示圖像 – 2014-09-06 12:35:42

如何瀏覽jQuery中的多個圖像或文件？

回答

相關問題