Question

我正在研究MVC 5项目，我正在尝试裁剪并验证图像的宽度和高度。

这里jQuery代码，reader.readAsDataURL(this.files[0])发生错误'无法读取属性'0'未定义'。

var imageCropWidth = 0;
    var imageCropHeight = 0;
    var cropPointX = 0;
    var cropPointY = 0;
 
    var _URL = window.URL || window.webkitURL;
    $('#files').change(function () {
        debugger
        var file, img;
        if ((file = this.files[0])) {
            img = new Image();
            img.onload = function () {
                if (this.width <= 200 && this.height <= 200) {
 
                    var reader = new FileReader();
 
                    reader.onload = function (e) {
                        // get loaded data and render thumbnail.
 
                        document.getElementById("image").src = e.target.result;
                        var jcrop_api = $('#image').Jcrop({
                            setSelect: [500, 500, 10, 10],
                            allowMove: true,
                            allowResize: false,
                            onChange: setCoordsAndImgSize,
                            boxWidth: 500,
                            boxHeight: 500
                            //onSelect: updatePreview
 
                        });
                        //jcrop_api.setOption({ allowMove: false });
                        //jcrop_api.setOption({ allowResize: false })
                    };
 
                    // read the image file as a data URL.
                    reader.readAsDataURL(this.files[0]);
                    loadPopup();
                }
                else {
 
                    //$("#txtfileTitle").attr("placeholder", "Upload Image");
                    var message = "Image should be maximum 200x200 pixel size.";
                    errormesssage(message);
                    return false;
 
                }
            };
            img.src = _URL.createObjectURL(file);
        }
    });

如何解决此错误？

和，这是在裁剪之前或之后验证图像宽度和高度的好方法吗？

Answer 1

＆＃39;无法阅读属性＆＃39; 0＆＃39;未定义的＆＃39;是因为您试图访问元素＆＃39; 0＆＃39; 0数组＆＃39;文件＆＃39;这是null或undefined。你应该首先确定为什么＆＃39;文件＆＃39;当你的代码期望它并且在那里工作时，你正在使用的是没有实例化的。

尝试使用网络浏览器中的网络开发者工具在if ((file = this.files[0]))行上放置一个断点，然后检查一下，看看files未定义的原因。

一旦超过了那个，那么继续你的作物任务。您的行if (this.width <= 200 && this.height <= 200)可能是也可能不是检查图像大小的有效方法。尝试使用jQuery来解释使用here解释的图像对象的引用。

祝你好运！

Answer 2

错误：

this.files[0]

你无法获取文件两次。您在files[0]变量中有file。用这个而不是那个。

reader.readAsDataURL(file);

Answer 3

我遇到了同样的问题-我试图从数组中获取图像，并得到与您相同的消息。固定的问题是，我将所有内容包装在ng容器中，该容器检查是否首先收到了信息，如下所示：

<ng-container *ngIf="conceptCourse.Photos"> <!-- <- this removed the message in the console -->
    <img *ngIf="conceptCourse.Photos[1]['Path']" [src]="conceptCourse.Photos[1]['Path']"
         class="img-fluid z-depth-1"
         alt="{{conceptCourse.Photos[1]['Description']}}">
</ng-container>

如何解决'无法读取属性'0'未定义'错误？

3 个答案: