使用input实现多附件上传,上传接口循环调用直至全部上传结束

49 阅读1分钟

html部分:

<form id="uploadForm" enctype="multipart/form-data"> 
    <label for="files">选择多个文件:</label> 
    <input type="file" id="files" name="files[]" multiple> 
    <input type="submit" value="上传文件"> 
</form>

js部分:

$('#uploadForm').submit(function(event) { 
    event.preventDefault(); 
    var files = $('#files')[0].files; 
    var currentIndex = 0; 
    
    function uploadFile() { 
        if (currentIndex >= files.length) { 
            console.log('所有文件上传完成'); 
            return; 
        } 
        var formData = new FormData(); 
        formData.append('file', files[currentIndex]); 
        $.ajax({ 
            url: '/upload', 
            type: 'POST', 
            data: formData, 
            contentType: false, 
            processData: false, 
            success: function() { 
                console.log('文件上传成功:', 
                files[currentIndex].name); 
                currentIndex++; 
                uploadFile(); // 递归调用上传函数 
            }, 
            error: function() { 
                console.error('文件上传失败:', files[currentIndex].name); 
                currentIndex++; 
                uploadFile(); // 递归调用上传函数 
            } 
        }); 
    } 
    uploadFile(); // 调用上传函数开始上传 
});