jquery 上传图片事件

jQuery是一种广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画效果和AJAX交互等操作。其中，通过jQuery实现上传图片事件是一个非常常见的任务，下面我们来详细介绍一下。

// HTML代码
<input type="file" id="uploadInput" accept="image/*">
<img id="previewImg" src="#" alt="预览图片">

// jQuery代码
$('#uploadInput').on('change', function() {
    var file = this.files[0];
    if (!/^image\/\w+$/.test(file.type)) {
        alert("请选择图片文件");
        return false;
    }
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function() {
        $('#previewImg').attr('src', this.result);
    };
});

以上代码中，我们首先为input标签绑定了change事件，这个事件触发的时候就会执行我们定义的回调函数。在回调函数中，我们首先获取上传的文件，如果文件类型不是图片类型，就会弹窗提示选择图片文件。接着使用FileReader方法将文件读取为DataURL形式的字符串，最后将字符串赋值给img标签的src属性，实现预览效果。

总之，基于jQuery实现文件上传、图片预览等操作非常方便简单，通过上面的代码，我们也可以看出来jQuery非常适合处理这类基础的前端交互操作。