jQuery上传、预览、裁剪

Posted 2023-02-25

【中文标题】jQuery上传、预览、裁剪

【英文标题】：JQuery upload, preview, crop

【发布时间】：2013-09-30 14:25:24

【问题描述】：

我有一个上传脚本，它显示了使用 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="#"  />
<input type='file' id="imgInp" />

【参考方案1】：

您使用的是 Internet Explorer 吗？ Internet Explorer

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

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

【讨论】：

不，我使用的是 Firefox。我对问题进行了分类（虽然我现在不记得我是怎么做的了）- 很高兴知道对 IE 的支持，谢谢

记得时请发帖，可能对某人有用:)