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

客官°小女子只卖身不卖艺 2022-08-02 09:50 49阅读 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 条评论，49人围观）

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

相关阅读

相关 base64图片上传，并显示图片，

<a href="javascript:;" class="file">选择文件 <input type="hidden" id="files-button"

刺骨的言语ヽ痛彻心扉/ 2023年08月17日 16:38/ 0 赞/ 187 阅读

相关 html显示base64图片

1. 在base64字符串前添加`'data:image/png;base64,'` let base64 = ... // iVBORw0KGgoAAAANSUh

本是古典何须时尚/ 2023年02月15日 13:57/ 0 赞/ 36 阅读

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

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

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

相关 html显示Base64图片

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

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

相关图片上传(Base64)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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