사용자가 브라우저 파일 업로드를 취소했는지 여부를 알 수 있습니까?

Question

웹 브라우저에서 사용자가 파일 필드를 클릭하여 파일을 업로드하면 브라우저는 파일 업로드 대화 상자를 표시합니다 (적어도 Windows 및 OSX에서는).

는의 사용자가 자신의 마음을 변경하고 파일 업로드를 취소 가정하자. 우리가 알아낼 수 있을까요? 사용자가 Esc 키를 (즉, 일반적으로 파일 대화 상자를 닫습니다) 안타

우리는 알 수 있습니다. 그러나 사용자가 "취소"를 클릭하거나 탭을 "취소"하고 탭하는 경우 어떻게됩니까?

Answer 1

첫째, 난 당신이 아약스와 함께 뭔가를 할 또는 사용자가 양식을 제출하지 않는 <input type="file" />가 자동으로 파일을 업로드하지 않을 것을 강조하고 싶다. 사용자는 어떤 시점에서 양식을 제출하기를 원하는 경우에 대비하여 브라우저에서 파일을 찾을 수있는 위치를 알려줍니다.

무슨 일이 있었는지 확인하려면이 스크립트를 작성했습니다. 입력란에 입력하면 등록되지 않으므로 대신 입력란의 부모에 입력하십시오. 나머지는 첨부 된 순서대로 핸들러를 실행한다는 점에서 작동합니다.

사용자가 파일을 선택 (또는 업로드 취소) 거의 대부분의 경우에 두 번째 이상의 1/10 걸리는 경우

. 입력 대화 상자를 닫지 않아도 (예 : 파일을 선택하거나 이탈/클릭 취소를 누르면) 입력란 포커스를 얻는 특정 동작이 발생하면 타임 스탬프를 사용하여 데이터를 설정합니다. 그 때 입력 필드가 1/10th 초 이내에 초점을 얻으면, 나는 그것이 우리가 찾고있는 사건이 아니라는 것을 압니다. 두 번째로 확인해야 할 것은 값이 변경되는 경우입니다. 사용자가 대화 상자를 취소하면 값은 변경되지 않습니다. 사용자가 대화 상자를 취소했을 때 ... 어떻게 든 ... 같은 파일을 계속 업로드하려고합니다. 값이 변경되면 사용자는 업로드 할 파일에 대한 생각을 바꿨습니다. 사용자가 포럼을 제출할 때까지 파일이 업데이트되지 않습니다.

---

HTML : (jQuery로)

<input type="file" id="example" /> 

자바 스크립트 :

$(document).ready(function() { 
    $('#example').parent().on('keydown', function(e) { 
     var key = e.key || e.keyCode || e.which; 
     if(key == "Tab" || key == 9) { 
      $('#example').data('actiontime', +new Date()); 
     } 
    }); 

    $('#example').on('blur', function() { 
     $(this).data('lastval', $(this).val()); 
    }).on('mousedown', function() { 
     $(this).data('actiontime', +new Date()); 
    }).on('focus', function() { 
     var fastevents = new Date() - $(this).data('actiontime') < 100; 
     if($(this).data('lastval') == undefined) { 
      console.log('First run'); 
     } else if($(this).data('lastval') != $(this).val() && !fastevents) { 
      console.log('Input changed'); 
     } else if(!fastevents) { 
      console.log('User canceled dialog somehow'); 
     } else { 
      console.log('Other event'); 
     } 
    }); 
}); 

Answer 2

예, 업로드 버튼이 먼저 기능을 실행하게하십시오.

그런 다음 서버 Ajax 요청을 보냅니다.

이 쪽을 기록하십시오. 다른 요청이나 타임 아웃> 사용자가 업로드를 취소를 얻기 전에

그리고 어떤 파일이 업로드되지 않은 경우. 모든

Answer 3

1. 사용자가 파일 선택 버튼을 클릭하는 실행 자바 스크립트 이벤트 핸들러를 사용 기능.

2. 사용자가 본문을 클릭 할 때까지 루프을 연속적으로 실행합니다. 입력 파일이 변경되는 경우

3. 루프 내부 확인합니다.

또는 당신은 파일을 업로드하는 데 사용되는 방법에 따라 다릅니다 how-to-detect-when-cancel-is-clicked-on-file-input