上传、预览、裁剪

JQuery upload, preview, crop

本文关键字：裁剪 预览 上传      更新时间：2023-09-26

我有一个上传脚本，它显示了使用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" />

你使用的是 Internet Explorer 吗？Internet Explorer <10 不支持在尝试获取 input.files 时使用的文件 API。所以阅读器永远不会被设置和加载（尽管我相信阅读器在IE中也不受支持）。不幸的是，我正在研究一个类似的问题，所以只能告诉你为什么它不起作用，而不是如何让它工作（还），但大多数提到的选项都是使用 Flash 或将图像上传到临时文件。

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

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

相关文章：