Filtrowanie zaladowanych / zrzuconych plików

0

Witam

Skrypt jest prosty i niewielki i dość powszechny.
Poprzez przycisk wrzucamy do obiektu pliku różnego typu w tym zdjecia potem wybieram z listy typ pliku jaki nas interesuje i jeśli wybierzemy jpg np wyświetlić się mają tylko obrazji. Postanowiłem więc przerobic wykopany z sieci skrypt, ale chyba niezbyt dobrze ująłem pętlę lub działa to w inny sposób niż myślę.

CODE:

<body>

Drag your file here.

<input type="file" id="readFile" multiple="multiple" size="70" onchange="readSelectedFile()" /> <select id="options" onchange="chooseTypeOfFile()"> <option value="choose">wybierz typ pliku</option> <option value="jpg">jpg</option> <option value="doc">doc</option> <option value="pdf">pdf</option> </select>
<script> //Filtrowanie wynikow wedle typu pliku function chooseTypeOfFile() { var type = document.getElementById('options'); //Wybranie odpowiedniej wartosci z kontrolki select var selectedOption = type.options[type.selectedIndex].value; if(selectedOption === 'jpg') { //Create object and get element var actualType = document.getElementById('readFile'); var fileDisplayArea = document.getElementById('image'); var files = actualType.files; //console.log(files[0].type); //Check what kind of files is loaded type.addEventListener('change', function(e) { for(var i = 0; i < actualType.files.length; i++) { var file = readFile.files[i]; if(file.type.match(selectedOption)) { var reader = new FileReader(); reader.onload = function(e) { fileDisplayArea.innerHTML = ""; var img = new Image(); img.width = 100; img.src = reader.result; fileDisplayArea.appendChild(img); } reader.readAsDataURL(file); }else { fileDisplayArea.innerHTML = "File not supported!" } } } ); } </script>

Mam nadzieje, ze jest przejrzyście. Jak na moje aby mógł sprawdzać każdy element tablicy obiektów to chyba trzeba by wpleść jakąś pętlę.

0

Jezuuu... Weź to sformatuj...

0 
<body>
  
  <p id ="dropzone">
    Drag your file here.
  </p>
  <p id="info"></p>
  
  <!-- Load file by button and show description -->
  <input type="file" id="readFile" multiple size="70" onchange="readSelectedFile()" />
  
  <select id="options" onchange="chooseTypeOfFile()">
	  <option value="choose">wybierz typ pliku</option>
	  <option value="jpg">jpg</option>
	  <option value="doc">doc</option>
	  <option value="pdf">pdf</option>
</select>
	<div id="image"></div>
  <p id="txt"></p>

<script>

function chooseTypeOfFile()
		{
			var type = document.getElementById('options');
			//Wybranie odpowiedniej wartosci z kontrolki select
			var selectedOption = type.options[type.selectedIndex].value;
		
			if(selectedOption === 'jpg')
			{
				//Create object and get element
				var actualType = document.getElementById('readFile');
				var fileDisplayArea = document.getElementById('image');
				
				var files = actualType.files;
				//console.log(files[0].type);
				
				//Check what kind of files is loaded
				
				type.addEventListener('change', function(e)
				{
				for(var i = 0; i < actualType.files.length; i++)
				{
						var file = readFile.files[i];
						
						if(file.type.match(selectedOption))
						{
							var reader = new FileReader();
							reader.onload = function(e)
							{
								fileDisplayArea.innerHTML = "";
								
								var img = new Image();
								img.width = 100;
								img.src = reader.result;
								
								fileDisplayArea.appendChild(img);
							}
							reader.readAsDataURL(file);
						}else
						{
							fileDisplayArea.innerHTML = "File not supported!"
						}
					}
					}
				);
				
			}
	}
</script>

1 użytkowników online, w tym zalogowanych: 0, gości: 1