Js base64位图片上传

图片浏览,将浏览过的单个图片通过base64为方法放到本地,不进行二进制流,减轻服务器压力

<a href="javascript:void(0)" name="photo">本地图片浏览</a>&nbsp;&nbsp;
              <div style="display: none;">
                 <input type="file" name="seek_photo" id="file_seek" >
              </div>
 <!-- 图片临时存放div -->

                <div id="pic_shou" style="width: 250px;height: 400px; background: orange;  position: absolute;
  left: 10px;top: 660px; display: block;">已经浏览的图片<br></div>
               <!-- 图片临时存放div -->

              <!-- js图片浏览=====base64位本地显示 -->
               <script type="text/javascript">
                $('a[name="photo"]').click(function(){
                  // alert('点击确定浏览本地图片');
                   $('input[name="seek_photo"]').click();

                });
                // 图片改变事件
                $('input[name="seek_photo"]').change(function(){

                  var file_seek = document.getElementById('file_seek').files[0];
                  // base64上传本地
                  var reader = new FileReader();

                  reader.onloadend = function(){

                  console.log(reader);

                //发送给服务器
              //ws.send('{"type":"send_pic","content":"'+reader.result+'","desc":""}'); //Workerman数据推送

                var _img = '<img src="'+reader.result+'" width="110" />&nbsp;';

                $('#pic_shou').append(_img);

                };

                if(file_seek){
                    reader.readAsDataURL(file_seek);
                  }else{
                    preview.src = "";
                };


                });

               </script>
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个示例代码,使用canvas将图片压缩为指定大小,然后将压缩后的base64字符串上到服务器。 HTML代码: ```html <input type="file" id="file-input"> ``` JavaScript代码: ```javascript // 获取文件输入框元素 const fileInput = document.getElementById('file-input'); // 监听文件输入框变化事件 fileInput.addEventListener('change', () => { // 获取文件对象 const file = fileInput.files[0]; // 创建 FileReader 对象 const reader = new FileReader(); // 读取文件完成事件 reader.addEventListener('load', () => { // 创建图像对象 const img = new Image(); // 图像加载完成事件 img.addEventListener('load', () => { // 创建 canvas 对象 const canvas = document.createElement('canvas'); // 缩放比例 const scale = Math.min(800 / img.width, 800 / img.height); // 设置 canvas 大小 canvas.width = img.width * scale; canvas.height = img.height * scale; // 绘制图像到 canvas 中 const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // 将 canvas 转为 base64 字符串 const base64 = canvas.toDataURL('image/jpeg', 0.8); // 发送 base64 字符串到服务器 uploadBase64(base64); }); // 加载图像 img.src = reader.result; }); // 读取文件 reader.readAsDataURL(file); }); // 上 base64 字符串到服务器 function uploadBase64(base64) { // 发送 AJAX 请求 // ... } ``` 这里使用 canvas 将图片压缩为指定大小,然后将压缩后的 base64 字符串上到服务器。在实际开发中,还需要根据具体需求进行调整,比如调整压缩比例、设置图片格式、设置上方式等等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值