ajax 上传图片 非form

Ajax上传图片非form表单

Ajax（Asynchronous JavaScript and XML）是一种用于创建快速响应的Web应用程序的技术。在Web开发中，使用Ajax可以在不刷新整个页面的情况下与服务器进行异步通信，从而实现动态加载和更新页面内容。

本文将介绍如何使用Ajax来实现非form表单方式的图片上传功能。通常，我们使用form表单的方式来上传文件，但这种方式需要刷新整个页面，用户体验较差。而使用Ajax可以在不刷新页面的情况下发送文件数据，提升用户的交互体验。

假设我们有一个图片上传的需求，用户可以选择本地的图片文件，并将其上传到服务器。以下是一个基于Ajax的非form方式的图片上传示例：

// HTML部分
<div id="uploadForm">
    <input type="file" id="fileInput" accept="image/*" onchange="handleFileSelect(event)">
    <button id="uploadButton" onclick="uploadFile()" disabled>上传</button>
    <progress id="uploadProgress" value="0" max="100"></progress>
</div>

<div id="result"></div>

// JavaScript部分
function handleFileSelect(event) {
    var file = event.target.files[0];
    var reader = new FileReader();
    reader.onload = function (e) {
        var img = new Image();
        img.src = e.target.result;
        img.onload = function () {
            var maxWidth = 200;
            var maxHeight = 200;
            var canvas = document.createElement('canvas');
            var context = canvas.getContext('2d');

            // 缩放图片
            var width = img.width;
            var height = img.height;
            if (width > height) {
                if (width > maxWidth) {
                    height *= maxWidth / width;
                    width = maxWidth;
                }
            } else {
                if (height > maxHeight) {
                    width *= maxHeight / height;
                    height = maxHeight;
                }
            }
            canvas.width = width;
            canvas.height = height;
            context.drawImage(img,width,height);

            // 显示缩放后的图片
            var result = document.getElementById('result');
            result.innerHTML = '';
            result.appendChild(canvas);

            // 启用上传按钮
            var uploadButton = document.getElementById('uploadButton');
            uploadButton.disabled = false;
        };
    };
    reader.readAsDataURL(file);
}

function uploadFile() {
    var canvas = document.querySelector('canvas');
    var dataURL = canvas.toDataURL();

    // 发送图片数据到服务器
    var xhr = new XMLHttpRequest();
    xhr.open('POST','/upload',true);
    xhr.setRequestHeader('Content-Type','application/octet-stream');
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // 上传成功
            var response = JSON.parse(xhr.responseText);
            var result = document.getElementById('result');
            result.innerHTML = '上传成功，图片地址：' + response.url;
        }
    };
    xhr.upload.onprogress = function (e) {
        if (e.lengthComputable) {
            var percent = Math.round(e.loaded / e.total * 100);
            var progress = document.getElementById('uploadProgress');
            progress.value = percent;
        }
    };
    xhr.send(dataURL);
}

在上述代码中，我们首先给<input>标签添加了一个onchange事件处理函数handleFileSelect()，用于在用户选择图片文件后进行处理。在handleFileSelect()函数中，我们使用了FileReader对象读取文件数据，并将读取的结果显示在一个<canvas>标签中。这里我们还定义了一个最大宽度和最大高度，对于大于这个尺寸的图片进行等比例缩放。

当用户点击“上传”按钮时，调用函数uploadFile()。在这个函数中，我们首先使用<canvas>标签的toDataURL()方法将缩放后的图片转换为base64格式的字符串，然后使用XMLHttpRequest对象将该字符串上传到服务器。在上传过程中，我们可以监听上传进度，并将进度显示在一个<progress>标签中。当上传完成后，我们将服务器返回的结果显示在一个<div>标签中。

以上就是使用Ajax实现非form表单方式的图片上传功能的示例。通过使用Ajax，我们实现了在不刷新页面的情况下上传图片，并且可以获得上传进度和上传结果的反馈，极大地提升了用户体验。