2017-11-19 1 views
-1

사진 업로드 버튼을 비활성화하기 전에 변수 'j'를 세 번 증분하려고 할 때만 사용자가 일정량의 사진을 업로드하도록 할 수 있습니다. 나는 각 증가에 대한 경고 상자에 그것을 인쇄하기 때문에 j가 증가하고 있음을 알고있다. 나는 이것이 어떻게 작동하지 않는지 정말로 알고 싶다. 당신이 더 우아한 해결책을 가지고 있다면 나는 그것에 만족합니다.자바 스크립트의 IF 문에 문제가있는 경우

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 

    <style> 


    </style> 

</head> 
<body> 



    <input id="browse" type="file" onchange="previewFiles()" multiple> 
    <div id="preview"></div> 


    <script> 
     var j = 0; 

     if (j < 3){ 

      function previewFiles() { 

       j++; 
       alert(j); 
       var preview = document.querySelector('#preview'); 
       var files = document.querySelector('input[type=file]').files; 

       function readAndPreview(file) { 

        // Make sure `file.name` matches our extensions criteria 
         if (/\.(jpe?g|png|gif)$/i.test(file.name)) { 
          var reader = new FileReader(); 

         reader.addEventListener("load", function() { 
           var image = new Image(); 
           image.height = 100; 
           image.title = file.name; 
           image.src = this.result; 
           preview.appendChild(image); 
          }, false); 

          reader.readAsDataURL(file); 
         } 

       } 

       if (files) { 
        [].forEach.call(files, readAndPreview); 
       } 

      } 
     } 
     else { 
      alert("I want to get in here"); 
      document.getElementById("browse").disabled = true; 
     } 

    </script> 
</body> 

답변

1

if 블록은 외부 함수의 previewFiles가 호출 될 때 그래서, if 블록이 실행되지 않습니다이다. 이 시도 :

var j = 0; 
 

 
function previewFiles() { 
 

 
    if (j < 3) { 
 

 

 
     j++; 
 
     alert(j); 
 
     var preview = document.querySelector('#preview'); 
 
     var files = document.querySelector('input[type=file]').files; 
 

 
     function readAndPreview(file) { 
 

 
      // Make sure `file.name` matches our extensions criteria 
 
      if (/\.(jpe?g|png|gif)$/i.test(file.name)) { 
 
       var reader = new FileReader(); 
 

 
       reader.addEventListener("load", function() { 
 
        var image = new Image(); 
 
        image.height = 100; 
 
        image.title = file.name; 
 
        image.src = this.result; 
 
        preview.appendChild(image); 
 
       }, false); 
 

 
       reader.readAsDataURL(file); 
 
      } 
 

 
     } 
 

 
     if (files) { 
 
      [].forEach.call(files, readAndPreview); 
 
     } 
 

 

 
    } else { 
 
     alert("I want to get in here"); 
 
     document.getElementById("browse").disabled = true; 
 
    } 
 
}
<!DOCTYPE HTML> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 

 
    <style> 
 

 

 
    </style> 
 

 
</head> 
 
<body> 
 

 
    <input id="browse" type="file" onchange="previewFiles()" multiple> 
 
    <div id="preview"></div> 
 

 
</body>

+0

더 나은이 'J ++를 넣어; alert (j);'below'if (/\.(jpe?g|png|gif)$/i.test(file.name)) {'단지 3 개의 이미지 만 있는지 확인하십시오. –