JQuery上傳，預覽，剪裁

Question

我有一個上傳腳本，顯示使用JQuery上傳的照片的預覽。現在我想將JCrop應用到該預覽圖像，但不會將照片加載到JCrop區域。該腳本似乎工作，JCrop區域打開預覽的地方，但沒有照片顯示。任何人都可以請幫我解決這個問題嗎？

function readURL(input) { 

      if (input.files && input.files[0]) { 
       var reader = new FileReader(); 

       reader.onload = function (e) { 
        $('#avatar').attr('src', e.target.result); 
       } 
       reader.readAsDataURL(input.files[0]); 
      } 
     } 
     $("#imgInp").change(function(){ 
      readURL(this); 
      $('#avatar').Jcrop(); // JCROP Displayed but no Image shown 
     }); 

<img id="avatar" src="#" alt="your image" /> 
<input type='file' id="imgInp" /> 

Answer 1

您使用的是Internet Explorer嗎？ Internet Explorer < 10不支持您在嘗試獲取input.files時使用的File API。所以讀者從來沒有設置和加載器（雖然我確實認爲讀者也不支持在IE中）。 不幸的是，我正在研究一個類似的問題，所以只能告訴你它爲什麼不起作用，不知道如何使它工作（但），但大多數提到的選項是使用閃存或上傳圖像到臨時文件。

文件API IE支持：http://caniuse.com/#search=file%20api

文件API：http://www.w3.org/TR/FileAPI/