jquery 多图上传插件 简易无界面

// $('.yyzzFile').up(function(res) {
//     if (res.code == 1) {
//         console.log('上传成功:', res);
//         // 在这里处理成功后的逻辑
//         $('#zhizhaoimage').val(res.data.url);
//         $('.yyzzFile').html('<img src="'+res.data.url+'" >').addClass("noadd")
//     } else {
//         console.log('上传失败:', res.msg);
//         alert('上传失败: ' + res.msg);
//     }
// }, {
//     maxFiles: 1
// });
(function($) {
            // 默认配置
            const defaults = {
                maxFiles: 5,
                uploadUrl: '/api/common/upload',
                acceptedFiles: 'image/*',
                fileSizeLimit: 5 * 1024 * 1024 // 5MB
            };
            
            // 插件定义
            $.fn.up = function(callback, options) {
                const settings = $.extend({}, defaults, options);
                
                return this.each(function() {
                    const $button = $(this);
                    let files = [];
                    
                    // 尝试从data中获取fileInput，如果没有则创建
                    let $fileInput = $button.data('fileInput');
                    if (!$fileInput) {
                        $fileInput = $('<input type="file" multiple>')
                            .attr('accept', settings.acceptedFiles)
                            .css('display', 'none')
                            .appendTo('body');
                        $button.data('fileInput', $fileInput);
                    }
                    
                    // 点击按钮触发文件选择
                    $button.on('click', function() {
                        $fileInput.click();
                    });
                    
                    // 文件选择事件
                    $fileInput.on('change', function(e) {
                        handleFiles(e.target.files);
                    });
                    
                    // 处理选择的文件
                    function handleFiles(fileList) {
                        const newFiles = Array.from(fileList);
                        
                        // 检查文件数量限制
                        if (files.length + newFiles.length > settings.maxFiles) {
                            alert(`最多只能上传 ${settings.maxFiles} 个文件`);
                            $fileInput.val(''); // 重置input，允许重新选择
                            return;
                        }
                        
                        // 处理每个文件
                        let validFiles = [];
                        for (let file of newFiles) {
                            // 检查文件类型
                            if (!file.type.match('image.*')) {
                                alert('只能上传图片文件');
                                $fileInput.val('');
                                return;
                            }
                            
                            // 检查文件大小
                            if (file.size > settings.fileSizeLimit) {
                                alert(`文件 ${file.name} 大小超过限制`);
                                $fileInput.val('');
                                return;
                            }
                            
                            validFiles.push(file);
                        }
                        
                        // 添加到文件列表
                        files = files.concat(validFiles);
                        
                        // 自动开始上传
                        if (files.length > 0) {
                            uploadFiles();
                        }
                    }
                    
                    // 上传文件
                    function uploadFiles() {
                        if (files.length === 0) return;
                        
                        const formData = new FormData();
                        
                        // 添加所有文件到FormData
                        files.forEach((file, index) => {
                            formData.append('file', file);
                        });
                        
                        // 发送AJAX请求
                        $.ajax({
                            url: settings.uploadUrl,
                            type: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function(response) {
                                // 清空文件列表
                                files = [];
                                $fileInput.val('');
                                
                                // 调用回调函数
                                if (typeof callback === 'function') {
                                    callback(response);
                                }
                            },
                            error: function(xhr, status, error) {
                                // 调用回调函数
                                if (typeof callback === 'function') {
                                    callback({
                                        code: 0,
                                        msg: '上传失败: ' + error
                                    });
                                }
                            }
                        });
                    }
                });
            };
        })(jQuery);