fetch异步上传图片（附html+JavaScript+php代码）

效果

index.html

    
        
        
        
        
    

    
    

        
fetch图片上传示例
        
        
        
        
        
        

    

upload.js

// 确保JavaScript代码在DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    
    // 获取点击上传的按钮
    var fileButton = document.getElementById('imageFile');
    
    // 监听选择文件按钮是否已经选择了文件
    fileButton.addEventListener('change', function (){
        
        // 获取选择的文件
        var fileSelected = fileButton.files[0];
        
        // 执行上传函数
        uploadFile(fileSelected, function(error, response) {
            if (error) {
                
                // 上传文件失败
                console.log(error);
            } else {
                
                // 上传文件成功
                var jsonData = JSON.parse(response);
                
                console.log(jsonData);
                
                // 显示上传结果预览
                document.getElementById('result').innerHTML = '';
            }
        });
    });
    
    // 清空file表单的选择
    fileButton.value = '';
})

// 上传函数
function uploadFile(file, callback) {
    
    // 获取表单数据
    var formData = new FormData();
    formData.append('file', file);
    
    // 请求上传服务器
    fetch('upload.php', {
        method: 'POST',
        body: formData,
    })
    .then(function(response) {
        return response.text();
    })
    .then(function(data) {
        callback(null, data);
    })
    .catch(function(error) {
        callback(error, null);
    });
}

upload.php

 0){
        
        $result = array(
            'code' => 201,
            'msg' => '上传失败'
        );
    }else{
        
        // 上传文件
        move_uploaded_file($_FILES["file"]["tmp_name"], "upload/".$newfile.$hzm);
        $file_url = 'http://'.$_SERVER['SERVER_NAME'].$_SERVER["REQUEST_URI"];
        $result = array(
            "code" => 200,
            "msg" => "上传成功",
            "url" => dirname($file_url)."/upload/".$newfile.$hzm
        );
    }
}else{
    
    $result = array(
        'code' => 202,
        'msg' => '此类文件不能上传'
    );
}

// 输出JSON
echo json_encode($result, JSON_UNESCAPED_UNICODE);
?>

注意，需要在同一目录下建立upload目录以存放上传的文件。

作者

TANKING