使用XMLHttpRequest上传文件
2025-07-22 13:28:18


/* Promise 基本用法
ixhr.UploadPromise('/upload', { key: 'value' }, fileInput, {
    MaxFileSize: 1024 * 1024 * 5, // 5MB
    OnProgress: function(progress) {
        console.log('上传进度:', progress.percent + '%');
    }
})
.then(function(response) {
    console.log('上传成功:', response);
})
.catch(function(error) {
    console.error('上传失败:', error);
});
*/



/* 使用示例
javascript
// 基本用法
XHR.upload(
    {
        url:'/upload',
        allowedExtensions: ['jpg', 'png', 'pdf'],
        maxFileSize: 5 * 1024 * 1024, // 5MB
        onProgress: function (progress) {
            console.log('上传进度:', progress.percent + '%');
        }
    },
    { userId: 123 },
    document.getElementById('fileInput'),
    function (response, error) {
        if (error) {
            console.error('上传错误:', error);
            if (error.name === 'InvalidFileType') {
                alert('请上传以下类型的文件: ' + error.allowedExtensions.join(', '));
            }
        } else {
            console.log('上传成功:', response);
        }
    }
    
);
*/


// 使用示例
/**
 * 文件上传示例
 * @example
 * XHR.Upload(
 *   {
 *     url:'/upload',
 *     allowedExtensions: ['jpg', 'png'],
 *     maxFileSize: 5 * 1024 * 1024 // 5MB
 *   }
 *   { userId: 123 },
 *   document.getElementById('fileInput'),
 *   function(response, error) {
 *     if (error) {
 *       console.error('上传错误:', error);
 *     } else {
 *       console.log('上传成功:', response);
 *     }
 *   },
 * );
 */

/**
 * // 显示结果
function showResult(elementId, success, message) {
    var resultElement = document.getElementById(elementId);
    resultElement.textContent = message;
    resultElement.className = 'result ' + (success ? 'success' : 'error');
}

// 显示进度
function showProgress(progressElementId, progressTextId, percent) {
    document.getElementById(progressElementId).style.width = percent + '%';
    document.getElementById(progressTextId).textContent = percent + '%';
}

// 显示文件列表
function showFileList(fileListElementId, files) {
    var fileListElement = document.getElementById(fileListElementId);
    fileListElement.innerHTML = '';
    
    Array.from(files).forEach(function(file) {
        var fileItem = document.createElement('div');
        fileItem.className = 'file-item';
        fileItem.textContent = file.name + ' (' + ixhr.FormatFileSize(file.size) + ')';
        fileListElement.appendChild(fileItem);
    });
}

// 基本文件上传
document.getElementById('basicUploadBtn').addEventListener('click', function() {
    var fileInput = document.getElementById('basicFileInput');
    var progressContainer = document.getElementById('basicProgress');
    progressContainer.style.display = 'block';
    
    var upload = ixhr.Upload(
        '/api/upload', // 上传接口URL
        {}, // 额外的表单数据
        fileInput, // 文件输入
        function(response, error) {
            if (error) {
                showResult('basicResult', false, '上传失败: ' + error.message);
            } else {
                showResult('basicResult', true, '上传成功: ' + JSON.stringify(response));
            }
        },
        {
            OnProgress: function(progress) {
                showProgress('basicProgressBar', 'basicProgressText', progress.percent);
            }
        }
    );
});

// 多文件上传
document.getElementById('multiFileInput').addEventListener('change', function() {
    showFileList('multiFileList', this.files);
});

document.getElementById('multiUploadBtn').addEventListener('click', function() {
    var fileInput = document.getElementById('multiFileInput');
    var progressContainer = document.getElementById('multiProgress');
    progressContainer.style.display = 'block';
    
    var upload = ixhr.Upload(
        '/api/upload',
        {},
        fileInput,
        function(response, error) {
            if (error) {
                showResult('multiResult', false, '上传失败: ' + error.message);
            } else {
                showResult('multiResult', true, '上传成功: ' + JSON.stringify(response));
            }
        },
        {
            OnProgress: function(progress) {
                showProgress('multiProgressBar', 'multiProgressText', progress.percent);
            }
        }
    );
});

// 带限制的上传
document.getElementById('restrictedUploadBtn').addEventListener('click', function() {
    var fileInput = document.getElementById('restrictedFileInput');
    var progressContainer = document.getElementById('restrictedProgress');
    progressContainer.style.display = 'block';
    
    var upload = ixhr.Upload(
        '/api/upload',
        {},
        fileInput,
        function(response, error) {
            if (error) {
                showResult('restrictedResult', false, '上传失败: ' + error.message);
                if (error.invalidFiles) {
                    error.invalidFiles.forEach(function(fileError) {
                        console.error(fileError.file.name + ': ' + fileError.details);
                    });
                }
            } else {
                showResult('restrictedResult', true, '上传成功: ' + JSON.stringify(response));
            }
        },
        {
            AllowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
            MaxFileSize: 2 * 1024 * 1024, // 2MB
            OnProgress: function(progress) {
                showProgress('restrictedProgressBar', 'restrictedProgressText', progress.percent);
            }
        }
    );
});

// 带表单数据的上传
document.getElementById('formDataUploadBtn').addEventListener('click', function() {
    var fileInput = document.getElementById('formDataFileInput');
    var progressContainer = document.getElementById('formDataProgress');
    progressContainer.style.display = 'block';
    
    var formData = {
        username: document.getElementById('username').value,
        description: document.getElementById('description').value,
        timestamp: new Date().toISOString()
    };
    
    var upload = ixhr.Upload(
        '/api/upload',
        formData,
        fileInput,
        function(response, error) {
            if (error) {
                showResult('formDataResult', false, '上传失败: ' + error.message);
            } else {
                showResult('formDataResult', true, '上传成功: ' + JSON.stringify(response));
            }
        },
        {
            OnProgress: function(progress) {
                showProgress('formDataProgressBar', 'formDataProgressText', progress.percent);
            }
        }
    );
});

// 注册自定义MIME类型
ixhr.RegisterMimeTypes({
    'heic': 'image/heic',
    'heif': 'image/heif',
    'myext': 'application/x-my-custom-type'
});
 */