移动端h5实现手机拍照上传图片,相册选择上传图片input type=file

原生js小功能 同时被 3 个专栏收录
4 篇文章 0 订阅
1 篇文章 0 订阅
1 篇文章 0 订阅

移动端h5实现手机拍照上传图片,相册选择上传图片input type=file

有不足或者不对的在下方留言,有不明白的也请在下方留言,虽然我不一定能看到,话不多说上代码,注释都写好了

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片上传</title>
    <style>
        #preview {
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
        }

        #preview img {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>

<input type="file" accept="image/*" id="uploadImg" name="uploadImg">
<input type="button" value="上传" id="btnSubmit">
<div class="photo" id="preview"></div>
</body>
</html>
<script>
    var uploadImg = document.getElementById('uploadImg'),
        preview = document.getElementById('preview'),
        btnSubmit = document.getElementById('btnSubmit'),
        imgurl = '';

    uploadImg.addEventListener('change', handleFileImg, false);

    btnSubmit.addEventListener('click',submitImg,false); //上传按钮

	// 拍照选择完成的回调
    function handleFileImg() {
		// 为了获取图片的本地路径
        window.URL = window.URL || window.webkitURL;
		// 获取移动端类型Android   iPhone  ipad
        var sUserAgent = navigator.userAgent.toLowerCase();
		// 获取当前图片信息(单张图片上传)
        var selected_file = uploadImg.files[0];
		console.log(selected_file);
        if (sUserAgent.match(/android/i) == "android") {
            var img = new Image();
			// 生成一个本地图片展示路径
            img.src = window.URL.createObjectURL(selected_file);
            preview.innerHTML = '';
			// 添加到页面展示
            preview.appendChild(img);

			/*
			new FileReader():方法简述
			一、调用FileReader对象的方法

			方法名 参数 描述
			abort none 中断读取
			readAsBinaryString file 将文件读取为二进制码
			readAsDataURL file 将文件读取为 DataURL
			readAsText file, [encoding] 将文件读取为文本
			readAsText:该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。
			readAsBinaryString:该方法将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储文件。
			readAsDataURL:这是例子程序中用到的方法,该方法将文件读取为一段以 data: 开头的字符串,这段字符串的实质就是 Data URL,Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

			二、处理事件
			事件 描述
			onabort 中断时触发
			onerror 出错时触发
			onload 文件读取成功完成时触发
			onloadend 读取完成触发,无论成功或失败
			onloadstart 读取开始时触发
			onprogress 读取中
			*/
            var reader = new FileReader();//简单来说就是异步读取电脑中的文件
            reader.onload = function (e) {
                imgurl = e.target.result;
            };
            reader.readAsDataURL(selected_file);
        } else {

            //判断文件类型是否为图片
            if (!selected_file.type.match(/image.*/)) return false;
            

            var img = document.createElement('img');
			// base64赋值 
            img.file = selected_file;
            preview.innerHTML = '';
            preview.appendChild(img);

            img.onload = function () {
                imgurl = img.src;
            };

            var reader = new FileReader();
            reader.onload = function (e) {
                img.src = e.target.result;
            };
            reader.readAsDataURL(selected_file);
        }
    }

	// 上传base64编码到后台
    function submitImg() {
		// 根据公司需要自行修改
        var start = imgurl.indexOf(',') + 1;
        dataurl = imgurl.substr(start);
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open('post', 'xxxxx', true);
        xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
        xmlhttp.setRequestHeader('X_Requested-With', 'XMLHttpRequest');
        xmlhttp.send('dataurl=' + encodeURIComponent(dataurl));
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                console.log(xmlhttp.responseText)
            }
        }
    }
</script>
  • 1
    点赞
  • 1
    评论
  • 5
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值