前端JS特效第31波：jQuery图片上传展示插件imgFileupload.js

以下是一个简化的实现imgFileUpload插件的核心函数示例，用于模拟图片预览功能：

(function($) {
    $.fn.imgFileUpload = function() {
        this.on('change', function() {
            var files = this.files;
            if (files.length === 0) return;
 
            var file = files[0];
            if (/^image\/[a-z]+$/.test(file.type)) { // 检查是否为图片类型
                // 创建FileReader对象
                var reader = new FileReader();
                reader.onload = function(e) {
                    // 创建img元素并显示图片
                    $('<img>').attr('src', e.target.result).appendTo('body');
                };
                // 以DataURL的形式读取文件内容
                reader.readAsDataURL(file);
            } else {
                alert('请选择图片文件');
            }
        });
        return this; // 使插件支持链式调用
    };
})(jQuery);
 
// 使用方法：
$('input[type=file]').imgFileUpload();

在这个示例中，我们定义了一个imgFileUpload函数，它会在change事件触发时被调用。如果用户选择了文件，并且这个文件是图片类型，那么使用FileReader对象以DataURL的形式读取文件，并在读取完成后将图片内容显示在页面上。这个插件可以通过jQuery链式调用进一步操作其他DOM元素。