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

2024-05-21 02:18

本文主要是介绍HTML5上传图片base64编码显示缩略图,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

<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);
})


这篇关于HTML5上传图片base64编码显示缩略图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/995975

相关文章

Vue3的Teleport:Teleport是Vue3的一个新功能,它允许我们将子组件渲染到父组件以外的地方,这在处理模态框、弹出窗口等情况时非常有用

I. Teleport 的概述 Teleport 的定义:   在 Vue 3.0 中,Teleport 是一个新的内置组件,它允许我们将任何部分的渲染内容 Teleport(传送)到 Vue 应用范围之外的地方。 换句话说,你可以控制片段,让它们在 DOM 中的任何位置渲染,而不仅仅是在当前组件内部。   Teleport 的效用和应用场景:   Teleport 的主要用途是处理在 UI

vue2和vue3数据代理的区别

前言: vue2 的双向数据绑定是利⽤ES5的⼀个 API ,Object.defineProperty( )对数据进行劫持结合发布订阅模式的方式来实现的。 vue3 中使⽤了 ES6的Proxy代理对象,通过 reactive() 函数给每⼀个对象都包⼀层Proxy,通过 Proxy监听属性的变化,从而实现对数据的代理操作。 一,Object.defineProperty( ) let

卧槽,6。套死你猴子,Tomcat访问html页面显示源码?

卧槽,6。Tomcat访问html页面显示源码? 元凶text/explain //踩坑!!!不能用 servletResponse.setContentType("text/explain,否则访问html会看到源码,而不是渲染页面; charset=UTF-8");servletResponse.setContentType("text/html; charset=UTF-8");

vscode用vue框架2,续写登陆页面逻辑,以及首页框架的搭建

目录 前言: 一、实现登录页信息验证逻辑 1.实现登录数据双向绑定 2.验证用户输入数据是否和默认数据相同 补充知识1: 知识点补充2: 二、首页和登录页之间的逻辑(1) 1. 修改路由,使得程序被访问先访问首页 知识点补充3:  三、搭建基本首页框架 (1)在element-plus官网上找到对应的结构, (2)解决!白色背景未填充完全,  四、首页和登录页之间的逻辑(

加载网络图片显示大图

1.将图片的uri列表和下标传给ImagePagerActivity public void imageBrower(int position, ArrayList<String> urls2) {Intent intent = new Intent(this, ImagePagerActivity.class); intent.putExtra(ImagePagerActivity

vue dist文件打开index.html报Failed to load resource: net::ERR_FILE_NOT_FOUND

本地正常。打包好的dist文件打开index.html报Failed to load resource: net::ERR_FILE_NOT_FOUND 解决办法: 在webpack.prod.conf.js 中output添加参数publicPath:’./’ 在webpack.base.conf.js里 publicPath: process.env.NODE_ENV === ‘pro

vue-cil项目中使用外部js的3种方法

vue-cil项目中 1. 导入属性的方法 新建 ./api/api.js import Vue from 'vue';Vue.prototype.test=function () {alert(111)} 在main.js 中导入; import * as API from './api/api.js' 在任何一个.vue文件中都可以使用此属性.例如 在a.vue中 this.t

vue-cil 项目常用npm 命令行;

``` bash# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build 删除目录;npm install -g rimraf(如果还没安装rimraf,全局安装ri

html标签转换成img图片

app 里的元素需要转换成图片 <script src="../assets/js/html2canvas.min.js"></script>$(function () {html2canvas(document.querySelector("#app"), {useCORS: true}).then(canvas => {layer.close(vm.layerIndex)var img =

按顺序加载外部资源js css

cmmon.js /*** 公共js文件* 内置参数说明:* locationUrl:硬盘路径(开发模式使用)* ytRootUrl:系统根目录,引入该js文件后可直接使用* initJq:自定义jq文件的目录,如果需要引用不同的jq文件,请修改目录。* initCssUrl:初始化css文件容器,如果需要新增或修改引入的c