HTML5上传图片base64编码显示缩略图

客官°小女子只卖身不卖艺 2022-08-02 09:50 10阅读 0赞

<li>
    	<label for="username">营业执照</label>
    	<a href="javascript:void(0);" class="cert-btn-blue-add"><span class="icon-add-white"></span>
    		<input type="file" capture="camera"/>添加图片
    	</a>
    	<a class="cert-arrow-right-2x"></a>
    </li>

$('input[type=file]').change(function(){
    	var inputObj=$(this);//input对象
    	var liObj=$(this).parent('a').parent('li');//input所在li对象
    	var aObj=$(this).parent('a.cert-btn-blue-add');//上传按钮
    
    	var oFile=this.files[0];
    
    	var oReader = new FileReader();
    	oReader.onload = function(e){
    		var sBase64 = e.target.result;
    		// 部分Android下base64字符串格式不完整
    		if(window.gIsAndroid && sBase64.indexOf("data:image/") != 0){
    			var sMime = sName.split(".").pop().toLowerCase();
    			sBase64 = sBase64.replace("base64,", "image/" + sMime + ";base64,");
    		}
    		
    		var src=sBase64;
    
        	var img = new Image();
        	img.onload = function () {
        		liObj.append(img);
        		liObj.find('a.cert-arrow-right-2x').show();
        	};
        	img.src = typeof src === 'string' ? src : URL.createObjectURL(src);
        	aObj.hide();
    
        	sBase64 = null;
    	}
    	oReader.readAsDataURL(oFile);
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关 php图片生成缩略图_PHP图片上传，并生成缩略图保存

HTML表单上传： PHP接收处理upload.php // 文件及缩放尺寸 $imgfile = 'a.jpg';//这可以读取刚上传的文件 $percent =

绝地灬酷狼/ 2022年11月12日 04:27/ 0 赞/ 313 阅读

相关 HTML5上传图片base64编码显示缩略图

<li> <label for="username">营业执照</label> <a href="javascript:void(0);" clas

客官°小女子只卖身不卖艺/ 2022年08月02日 09:50/ 0 赞/ 11 阅读

相关 html显示Base64图片

![Center][] [Center]: /images/20220714/5513e5fe4c6c4081aebe59f88e7c1410.png

喜欢ヅ旅行/ 2022年07月14日 14:19/ 0 赞/ 239 阅读

相关图片上传(Base64)

图片上传(Base64) HTML <label for="pic_upload" class="file-update-title"> 标

野性酷女/ 2022年06月17日 11:16/ 0 赞/ 377 阅读

相关【调错】(一)上传图片时缩略图显示问题

问题描述：当用户上传的图片太大时，如6M。此时生成的缩略图显示有问题（部分图片为黑色，没有压缩完全）问题分析： 1.（压缩的

我会带着你远行/ 2022年06月06日 14:00/ 0 赞/ 221 阅读

相关 JS实现input上传图片时显示缩略图

注意：以下代码只适用于chrome、Firefox和IE10以上 <!DOCTYPE html> <html> <head> <meta ch

电玩女神/ 2022年06月06日 05:56/ 0 赞/ 270 阅读

相关 tp5上传图片并生成缩略图

<?php namespace app\\common\\controller; use app\\common\\model\\Goods; class Tool

╰+攻爆jí腚メ/ 2022年04月08日 09:15/ 0 赞/ 404 阅读

相关图片上传 Base64 编码解码转换

图片上传 Base64 编码解码转换图片上传时往往进行压缩处理，将压缩后的图片再传输给后端，这里以Base64编码来替代压缩，仅作演示，附Demo，前后端代码 Ht

我就是我/ 2022年02月20日 04:00/ 0 赞/ 368 阅读

相关【HTML5】------- 图片Base64编码详解

> 引言　　 > > 图片处理在前端工作中可谓占据了很重要的一壁江山。而图片的 base64 编码可能相对一些人而言比较陌生，本文不是从纯技术的角度去讨论图片的 bas

女爷i/ 2022年02月19日 00:55/ 0 赞/ 828 阅读

相关 tp5 文件上传图片上传缩略图

图片上传 html页面： <!DOCTYPE html> <html> <head> <meta charset="utf-8">

怼烎@/ 2022年02月17日 09:16/ 0 赞/ 417 阅读