JavaScript使用readAsDataURL读取图像文件

JavaScript中提供了FileReader对象，该对象可以实现对文件内容的读取。其中，readAsDataURL()方法可以将文件读取为Data URL格式，该格式可以将图片转换为Base64编码的字符串。

以下是读取图像文件并在页面中展示的代码示例：

1. HTML代码：

<input type="file" id="fileInput" accept=".jpg,.png,.gif"> <!-- 允许选择.jpg/.png/.gif格式的文件 -->
<img id="imgPreview">

1. JavaScript代码：

let fileInput = document.getElementById('fileInput');
let imgPreview = document.getElementById('imgPreview');
fileInput.addEventListener('change', function(){
    let reader = new FileReader();
    reader.readAsDataURL(this.files[0]); // 读取文件
    reader.onload = function(){
        imgPreview.src = this.result; // 展示图片
    }
});

该代码的作用是绑定文件选择输入框的change事件，当用户选择图片后，读取并展示该图片。

除此之外，我们还可以将读取到的Data URL格式的字符串，通过Ajax方式发送给后端，进行文件上传等操作。以下是一个示例代码：

let fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(){
    let reader = new FileReader();
    reader.readAsDataURL(this.files[0]); // 读取文件
    reader.onload = function(){
        let base64Str = this.result; // 获取Base64编码字符串
        let xhr = new XMLHttpRequest();
        xhr.open('POST', '/upload');
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                console.log(xhr.responseText); // 上传成功后的处理方式
            }
        };
        xhr.send("img=" + encodeURIComponent(base64Str)); // 发送请求
    }
});

该代码的作用是读取并上传读取到的图像文件，其中xhr对象为js原生Ajax对象，可以使用任意Ajax库来实现。在发送Ajax请求时，需要将Base64字符串进行URL编码，否则可能导致后端无法正常解析该字符串。