表单提交错误处理：预览元素error事件无法获取错误消息

检查事件对象的正确属性 #

在jQuery绑定的error事件中，原生DOM事件的错误信息不会直接挂在event.target上，因为jQuery会包装事件对象。你需要通过event.originalEvent获取原生事件对象，再从中提取错误详情：

$('.preview-element', '.file-upload').on('error', function(event) {
    const originalEvent = event.originalEvent;
    // 针对图片类预览元素的错误获取逻辑
    if (originalEvent.target instanceof HTMLImageElement) {
        console.log('原生错误对象:', originalEvent.error);
        console.log('错误状态文本:', originalEvent.target.statusText);
    } else {
        // 打印完整对象排查属性
        console.dir(originalEvent);
    }
});

不同元素的错误信息位置差异 #

如果你的.preview-element是<img>标签，图片加载失败时，错误信息通常存储在originalEvent.error（原生Error对象）中，而非event.target的直接属性。如果是其他类型的预览元素（比如音频、视频），需要对应查看该元素类型的错误事件规范。

直接打印事件对象排查 #

如果上述方法仍找不到错误信息，直接在回调中打印完整事件对象，手动定位错误相关字段：

$('.preview-element', '.file-upload').on('error', function(event) {
    console.dir(event); // 查看jQuery包装后的事件对象
    console.dir(event.target); // 查看目标元素的所有属性
});

通过控制台的对象结构，你能直观找到当前场景下错误消息的实际存储位置，避免依赖通用资料的模糊描述。

内容的提问来源于stack exchange，提问作者Martin the hun