Html5 input[type='file'] 把图片转换成base64

本文介绍了一种使用JavaScript处理用户上传的图片文件的方法。该方法通过读取文件为Base64编码,创建图片对象并获取尺寸信息,然后将图片绘制到Canvas上,最后返回包含原始URL和Base64编码的图片数据。
  function _addImgFileListener(obj, fun)
    {
        $(obj).change(function ()
        {
            try
            {
                var file = this.files[0];
                var reader = new FileReader();
                reader.onload = function ()
                {
                    var img = new Image();
                    img.src = reader.result;
                    img.onload = function ()
                    {
                        var w = img.width, h = img.height;
                        var canvas = document.createElement('canvas');
                        var ctx = canvas.getContext('2d');
                        $(canvas).attr({
                            width: w,
                            height: h
                        });
                        ctx.drawImage(img, 0, 0, w, h);
                        var base64 = canvas.toDataURL('image/jpeg', 0.5);
                        var result = {
                            url: window.URL.createObjectURL(file),
                            base64: base64,
                            clearBase64: base64.substr(base64.indexOf(',') + 1),
                            suffix: base64.substring(base64.indexOf('/') + 1, base64.indexOf(';')),
                        };
                        fun(result);
                    }
                }
                reader.readAsDataURL(this.files[0]);
            } catch (e)
            {
                _showMsg(e);
            }
        });

    }

$(document).ready(function(){

_addImgFileListener("#uploadimg",function(data)

{

    //你的业务

}

);

})

<input type="file" class="uploading" name="file" id="uploadimg" accept="image/jpg,image/jpeg,image/gif,image/png">

### 获取通过 `<input type="file">` 选择的图片的 `src` 或 URL 在 JavaScript 中,无法直接从 `<input type="file">` 元素获取文件的真实路径作为其 `src` 属性值。然而,可以通过创建一个临时的 Base64 编码字符串或者使用 `URL.createObjectURL()` 方法来生成该文件的一个可访问的 URL。 以下是两种实现方式: #### 使用 `FileReader` 转换为 Base64 字符串 可以利用 `FileReader` 对象读取文件并将其转换为 Base64 数据 URI。这种方式适用于需要将图像数据嵌入 HTML 的场景[^1]。 ```javascript function previewFile() { const preview = document.querySelector('img'); const file = document.querySelector('input[type=file]').files[0]; const reader = new FileReader(); reader.addEventListener("load", function () { // 将文件内容转为 Base64 并赋值给 img 标签 src 属性 preview.src = reader.result; }, false); if (file) { reader.readAsDataURL(file); } } ``` 上述代码片段展示了如何通过 `readAsDataURL` 方法将选定的文件转化为 Base64 字符串,并设置到指定的 `<img>` 元素中显示预览效果。 #### 使用 `URL.createObjectURL()` 创建对象 URL 另一种更高效的方式是调用 `URL.createObjectURL()` 函数生成指向所选文件的对象 URL。相比 Base64 方式,它不会增加页面大小,性能更好[^3]。 ```javascript function setPreviewImage(inputElement, targetImgElement) { if (inputElement.files && inputElement.files[0]) { let objectUrl = URL.createObjectURL(inputElement.files[0]); targetImgElement.src = objectUrl; // 当不再需要时释放内存资源 targetImgElement.onload = function () { URL.revokeObjectURL(objectUrl); }; } } const inputFile = document.querySelector('input[type=file]'); const previewImg = document.querySelector('img'); inputFile.addEventListener('change', function () { setPreviewImage(this, previewImg); }); ``` 以上代码定义了一个函数 `setPreviewImage` 来处理输入框变化事件,动态更新目标 `<img>` 元素的源地址。 需要注意的是,在某些旧版浏览器上可能不支持这些特性,但在现代主流浏览器里已经广泛适用[^2]。 最后提醒一点,当提交表单至服务器端时通常不需要手动提取 `src` 值,而是借助 `FormData` API 完成多部分编码形式的数据传递操作。 ```javascript var formData = new FormData(); formData.append('image', document.getElementById('photoFile').files[0]); ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值