上传图片功能

最新推荐文章于 2024-09-27 16:13:06 发布

Zhe言9

最新推荐文章于 2024-09-27 16:13:06 发布

阅读量367

点赞数 1

分类专栏：前端文章标签：前端图片上传

本文链接：https://blog.csdn.net/qq_36552707/article/details/83894534

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

HTML

<img src="img/16-4@2x.png" onclick="browerfile.click()" id="QRCode" />
<input type="file" id="browerfile" style="display: none;" class="test">

JavaScript

var img = '';

	function b64EncodeUnicode(str) {
		return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
			return String.fromCharCode('0x' + p1);
		}));
	}
	//获取图片路径的方法，兼容多种浏览器，通過createObjectURL实现
	function getObjectURL(file) {
		var url = null;
		if (window.createObjectURL != undefined) {
			url = window.createObjectURL(file); //basic
		} else if (window.URL != undefined) {
			url = window.URL.createObjectURL(file);
		} else if (window.webkitURL != undefined) {
			url = window.webkitURL.createObjectURL(file);
		}

		return url;
	}
	//实现上上传图片功能代码
	$(function () {
		$("#browerfile").change(function (e) {
			var path = browerfile.value;
			var objUrl = getObjectURL(this.files[0]);
			if (objUrl) {
				$('#QRCode').attr("src", objUrl);
			}
			var file = e.target.files[0];
			var reader = new FileReader();
			reader.readAsDataURL(file); // 读出 base64
			reader.onloadend = function () {
				// 图片的 base64 格式, 可以直接当成 img 的 src 属性值        
				img = reader.result;
				// 下面逻辑处理
			};
		})
	})

注意：

<input type="file" accept="image/*;capture=camera">直接调用相机
<input type="file" accept="image/*" />调用相机 图片或者相册

兼容性
手机	UC浏览器	微信浏览器
IOS	支持拍照上传支持图库选择上上传	支持拍照上传支持图库选择上传
Android	支持拍照上传支持图库选择上传	不支持拍照上传支持图库选择上传