배열에서 파일 확장명 확인

Question

나는 여러 가지 방법으로 혼자서 웹을 찾은 다음 성공을 거두지 않았습니다.

파일 확장명이 "outpush.push"문과 같은 방식으로 허용되는지 여부를 묻는 메시지를 표시하려고합니다.

JPG, PNG, GIF와 같은 허용되는 파일 확장명의 ARRAY에서 가져와야하며 파일 확장명이 대문자 인 경우이를 감지해야합니다 (소문자로 변환).

내 스크립트는 다음과 같습니다. 스크립트에서 어떻게 그리고 어디서 그런 기능을 구현할 수 있을지 궁금하십니까?

function handleFileSelect(evt) { 

    var files = evt.target.files; // FileList object 
    var max_size = 5120; // Max file size 

    var output = []; 
    for (var i = 0, f; f = files[i]; i++) { 

     output.push('<li><strong><font size="3" color="FFFFFF">FILE: ', escape(f.name), '</strong> (', f.type || 'n/a', ') - ', 
      f.size, ' bytes, last modified: ', 
      f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a', 
      '</font></li>'); 

     if(f.size > max_size) { 

      output.push('<font size="5" color="FFFF00"><b>ERROR!! Sorry, but the file that you selected is too large. Please upload a file that is no larger than ' + max_size + ' KB.'); 
     } 

     if(f.size < max_size) { 
      output.push('<font size="5" color="FFFF00"><b>FILE SIZE OK. CLICK TO SEND button below.</font>'); 

      output.push('<font size="5" color="FFFFFF"><hr><b>IMPORTANT: Do not close this window. Wait till you see the next page when finished uploading your file.</font>'); 

      document.getElementById("myButton").style.display="all"; 
     } 

    } 

    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>'; 
} 

document.getElementById('files').addEventListener('change', handleFileSelect, false); 

Answer 1

당신의 HTML 구축하기위한 다음 고려할 수 있습니다.

1) 대신 여러 if 문으로, if-else 사용해야합니다,

if (f.size > max_size) { 
    // ... 
} else { 
    // ... 
} 

2) all

이 display에 대한 유효한 값이 아닙니다 사용 block 또는 inline :

document.getElementById("myButton").style.display = "block"; 

3) 오래된 <font> 태그를 사용 중입니다. 대신 스타일과 CSS를 사용하십시오. 귀하의 경우에는 msg에 대해 하나의 클래스를 사용하고 error, important 및 ok에 대한 추가 클래스를 사용합니다.

4) 단지 indexOf()를 사용하여 배열 검사를 수행하려면 :

var extensions = ["jpg", "jpeg", "txt", "png"]; // Globally defined 

... 

// Get extension and make it lowercase 
// This uses a regex replace to remove everything up to 
// and including the last dot 
var extension = f.name.replace(/.*\./, '').toLowerCase(); 

if (extensions.indexOf(extension) < 0) { // Wasn't found 
    output.push('<li class="msg error">ERROR!! Sorry, but the file that you selected is not a valid file type. Valid types are: ', valid, '</li>'); 
} else ... 

데모 : http://jsfiddle.net/jtbowden/L2Gps/

Answer 2

는이 같은으로 배열 할 수 있습니다 :

var file_types = {'jpg', 'png', 'gif'}; 

을 한 다음에 루프

if ($.inArray(f.ext, file_types) == -1) { 
output.push('<font size="5" color="FFFF00"><b>ERROR!! Incorrect file type! Accepted file types are : jpg, png, gif</b></font>'); 
} 

더 읽기에 대한 inArray()이 그런 짓을.

Answer 3

두 가지 방법 중 하나를 시도해 볼 수 있습니다. 확장 프로그램을 잡고 허용되는 확장명 배열 또는 정규 표현식과 비교해보십시오.

var accepted_types = ['jpg', 'gif', 'png']; 
if (accepted_types.indexOf(f.ext) > 0) { 
    output.push(...); 
} 

는 jQuery를에 관해서는 - 당신은 당신의 코드에 문제가 몇 가지 있습니다

var file_list = $("<ul></ul>"); 
for (var i = 0, f; f = files[i]; i++) { 
    // work goes here, simply append the list elements into file_list 
    file_list.append($("<li>" ... "</li>")); 
} 

// to append your new list to id="list" 
$("#list").append(file_list); 
// or to replace the html with your new html 
$("#list").html(file_list.html());