單擊文件輸入上的取消時圖像不會變空？

Question

我使用Croppie這個裁剪圖像功能的插件。輸入文本字段變爲空，並且當用戶單擊取消文件輸入時圖像不會變空。我想在用戶單擊文件輸入上的取消按鈕時也刪除圖像。 DEMO

HTML

<form action="test-image.php" id="form" method="post"> 
    <input type="file" id="upload" value="Choose a file"> 
    <div id="upload-demo"></div> 
    <input type="hidden" id="imagebase64" name="imagebase64"> 
    <a href="#" class="upload-result">Send</a> 
</form> 

JS

$(document).ready(function() { 
    var $uploadCrop; 

    function readFile(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function(e) { 
     $uploadCrop.croppie('bind', { 
      url: e.target.result 
     }); 
     $('.upload-demo').addClass('ready'); 
     } 
     reader.readAsDataURL(input.files[0]); 
    } 
    } 
    $uploadCrop = $('#upload-demo').croppie({ 
    viewport: { 
     width: 200, 
     height: 200, 
     type: 'circle' 
    }, 
    boundary: { 
     width: 300, 
     height: 300 
    } 
    }); 
    $('#upload').on('change', function() { 
    readFile(this); 
    }); 
    $('.upload-result').on('click', function(ev) { 
    $uploadCrop.croppie('result', { 
     type: 'canvas', 
     size: 'original' 
    }).then(function(resp) { 
     $('#imagebase64').val(resp); 
     $('#form').submit(); 
    }); 
    }); 
}); 

Answer 1

嗯，這可能是一個典型的場景，因爲你不能click event到cancel按鈕，文件上傳的結合爲文件對話框的結果不會暴露到瀏覽器。所以我建議的是，如果文件上傳元素爲onchange event，並且如果其值爲空，則檢查。如果是，則在銷燬它之後重置croppie實例。這是更新的代碼和working Fiddle。

HTML

<form action="test-image.php" id="form" method="post"> 
    <input type="file" id="upload" value="Choose a file" onchange="clearImage(this)" /> 
    <div id="upload-demo"></div> 
    <input type="hidden" id="imagebase64" name="imagebase64"> 
    <a href="#" class="upload-result">Send</a> 
</form> 

JS

var $uploadCrop; 
var opts = { 
    viewport: { 
    width: 200, 
    height: 200, 
    type: 'circle' 
    }, 
    boundary: { 
    width: 300, 
    height: 300 
    } 
}; 

//change function.  
function clearImage(ctrl) { 
    if ($(ctrl).val() == "") { 
    $('#upload-demo').croppie('destroy'); 
    $uploadCrop=$('#upload-demo').croppie(opts); 
    } 
} 

$(document).ready(function() { 
    function readFile(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function(e) { 
     $uploadCrop.croppie('bind', { 
      url: e.target.result 
     }); 
     $('.upload-demo').addClass('ready'); 
     } 
     reader.readAsDataURL(input.files[0]); 
    } 
    } 

    $uploadCrop = $('#upload-demo').croppie(opts); 

    $('#upload').on('change', function() { 
    readFile(this); 
    }); 
    $('.upload-result').on('click', function(ev) { 
    $uploadCrop.croppie('result', { 
     type: 'canvas', 
     size: 'original' 
    }).then(function(resp) { 
     $('#imagebase64').val(resp); 
     $('#form').submit(); 
    }); 
    }); 

}); 

Answer 2

這將幫助你

$(document).ready(function() { 
 
    var $uploadCrop; 
 

 
    function readFile(input) { 
 
     if (input.files && input.files[0]) { 
 
      var reader = new FileReader();   
 
      reader.onload = function (e) { 
 
       $uploadCrop.croppie('bind', { 
 
        url: e.target.result 
 
       }); 
 
       $('.upload-demo').addClass('ready'); 
 
      }   
 
      reader.readAsDataURL(input.files[0]); 
 
     } 
 
    } 
 

 
    $uploadCrop = $('#upload-demo').croppie({ 
 
     viewport: { 
 
      width: 200, 
 
      height: 200, 
 
      type: 'circle' 
 
     }, 
 
     boundary: { 
 
      width: 300, 
 
      height: 300 
 
     } 
 
    }); 
 

 
    $('#upload').on('change', function() { readFile(this); }); 
 
    $('.upload-result').on('click', function (ev) { 
 
     $uploadCrop.croppie('result', { 
 
      type: 'canvas', 
 
      size: 'original' 
 
     }).then(function (resp) { 
 
      $('#imagebase64').val(resp); 
 
      $('#form').submit(); 
 
     }); 
 
    }); 
 
    
 
    $('.reset').on('click', function(){ 
 
     $('input').val(''); 
 
     $('.cr-viewport').html(''); 
 
     $('.cr-image').attr('src',''); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="test-image.php" id="form" method="post"> 
 
<input type="file" id="upload" value="Choose a file"> 
 
<div id="upload-demo"></div> 
 
<input type="hidden" id="imagebase64" name="imagebase64"> 
 
<a href="#" class="upload-result">Send</a> 
 
</form> 
 

 
<a class="reset">cancel</a>

Answer 3

我意識到，這個帖子已經有了選擇一個答案，但有一個容易得多，如果用戶取消文件選擇檢測方法對話窗口。

在您的onchange函數中，您可以使用帶有簡單if語句的FileReader構造函數來捕獲用戶是否選擇了文件。基本上，FileReader構造函數允許Web應用程序使用File或Blob對象讀取用戶選擇的文件內容。

您只需調用簡單的if語句來檢查上傳的文件是否可以被FileReader讀取。在這種情況下，如果用戶點擊文件選擇對話窗口上的取消按鈕，則無法讀取文件。

下面是如何實現這個的一個例子。雖然下面的例子是在JS中，但它可以在jQuery函數內使用。

input.onchange = function() { 
    var file = this.files[0]; 
    var reader = new FileReader(); 

    reader.readAsDataURL(file); 

    if(reader) { 
     // A FILE WAS SELECTED. 
    } else { 
     // THE USER CANCELLED THE FILE SELECTION. 
    } 
} 

你可以閱讀更多有關FileReader Constructor更多地瞭解它的功能和瀏覽器的支持。

這是我能找到的這個問題的最簡單的解決方案。我希望它能幫助其他人解決這個問題。