jQuery preventDefault並返回false無效

Question

我正在嘗試實現圖像預覽。 在我遇到需要防止input file不更改的問題之前，它工作正常。

的jsfiddle

嘗試更改圖像效果時。 更改為圖像后，嘗試將輸入文件更改為txt文件。 它警告正確的錯誤，但輸入文件也已更改。

$('body').on('change','.input-preview',function(e){
    var ito = $(this);
    var img = ito[0].files;
    var errs = [];
    for(x=0;x<img.length;x++){
        if(img[x].type!=='image/jpeg' && img[x].type!=='image/gif' && img[x].type!=='image/png'){
            errs.push('Not image.');
            break;
        }
        if(img[x].size>(1024000 * 5)){ 
            errs.push('File is too big.');
            break;
        }
    }
    if(errs.length){
        e.preventDefault();
        alert(errs[0]);
        return false;
    }else{
      previewIt(this, $('.preview-profile'));
    }
  });

Answer 1

change事件不可取消。 請參閱MDN上的文檔。

Answer 2

由於change不是cancelable事件，因此您可以在要“取消”該項目時手動將其刪除。

以下示例將不接受大小> 1024字節的文件。

 $("#fileInput").change(function() { if (this.files[0].size > 1024) { $("#result").text("File size exceeds 1024 bytes"); this.value = ""; } else { $("#result").text("OK"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" id="fileInput"/> <div id="result"></div>