文本查看器

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
    <title>图片上传</title>
</head>
<body>
    <h1>上传图片到远程服务器</h1><form method="post" action="upload.php" enctype="multipart/form-data"><form id="uploadForm" enctype="multipart/form-data">
        <input type="file" name="image" accept="image/*" required>
        <button type="submit">上传</button>
    </form>
    <div id="result"></div>

    <script>
        document.getElementById('uploadForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            var formData = new FormData();
            var fileInput = document.querySelector('input[type="file"]');
            formData.append('image', fileInput.files[0]);
            
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'upload.php', true);
            
            xhr.onload = function() {
                var resultDiv = document.getElementById('result');
                try {
                    var response = JSON.parse(xhr.responseText);
                    if (response.status === 'success') {
                        resultDiv.innerHTML = '<p>上传成功!</p>' +
                            '<p>文件路径: ' + response.path + '</p>' +
                            '<p>文件URL: <a href="' + response.url + '" target="_blank">' + response.url + '</a></p>';
                    } else {
                        resultDiv.innerHTML = '<p>上传失败: ' + response.message + '</p>';
                    }
                } catch (e) {
                    resultDiv.innerHTML = '<p>解析响应时出错: ' + e.message + '</p>';
                }
            };
            
            xhr.onerror = function() {
                document.getElementById('result').innerHTML = '<p>请求失败</p>';
            };
            
            xhr.send(formData);
        });
    </script>
</body>
</html>