移动端上传图片--调用手机的相册和相机

不念不忘少年蓝@ 2022-05-16 02:24 277阅读 0赞

网上百度找到一个方法不错，借鉴：代码如下

html:

<div class="head">
        <a class="btn-2">
            <input type="file" accept="image/*" id="upload" name="upload">
        </a>
    </div>
    <div class="photo" id="preview"></div>

css样式：

.head{
        height:40px; 
        width:100%; 
        position:relative; 
        z-index:110; 
        left:0px; 
        top:10px; 
    }
    .head .btn-2{
        display:block;
        width:42px;
        height:45px;
        background:url(../image/nimg37_2.png) center no-repeat;
        background-size:30px;
        position:absolute;
        top:0px;
        right:46px;
    }
    .head .btn-2 input {
        width:42px;
        height:45px;
        position: absolute;
        right: 0px;
        top: 0;
        opacity: 0;
    }

js.js

var upload = document.getElementById('upload'),
        preview = document.getElementById('preview'),
        surebtn = document.getElementById('surebtn'),
        imgurl = '';
    
    upload.addEventListener('change',handleFile,false);
    surebtn.addEventListener('click',upLoadFile,false);
    
    function handleFile(){
        window.URL = window.URL || window.webkitURL;
        var sUserAgent= navigator.userAgent.toLowerCase();
        var selected_file = upload.files[0];
    
        if(sUserAgent.match(/android/i) == "android"){
            var img = new Image();
            img.src = window.URL.createObjectURL(selected_file);
            preview.innerHTML = '';
            preview.appendChild(img);
    
    
            var reader = new FileReader();
            reader.onload = function(e) { imgurl = e.target.result; };
            reader.readAsDataURL(selected_file);
    
        }else{
    
            //判断文件类型是否为图片
            var imageType = /image.*/;
    
            if (!selected_file.type.match(imageType)) {
                return false;
            }
    
            var img = document.createElement('img');
            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);
        }
    }
    
    function upLoadFile(){
        var start = imgurl.indexOf(',')+1;
        dataurl = imgurl.substr(start);
    
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open('post','todo.php',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)
            }
        }
    }

发表评论取消回复

表情：

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

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

相关阅读

相关选择图片——相机与相册

- (IBAction)touchSelectImg:(id)sender { //在这里呼出下方菜单按钮项 UIActionSheet

悠悠/ 2023年10月16日 23:04/ 0 赞/ 69 阅读

相关手机端调用相册上传图片

![1266227-20190925164755614-1101436949.png][] ![1266227-20190925164806718-833242111

古城微笑少年丶/ 2023年06月04日 04:52/ 0 赞/ 23 阅读

相关移动端多图片上传

前端参考于[https://blog.csdn.net/qq\_37610423/article/details/84319410][https_blog.csdn.net_q

系统管理员/ 2023年03月14日 05:57/ 0 赞/ 7 阅读

相关微擎手机端上传图片

1、在php文件加代码： load()->func('tpl'); $images = ''; 2、html模板文件：在文件顶部，即“<!DOCTYPE

喜欢ヅ旅行/ 2023年01月03日 04:50/ 0 赞/ 183 阅读

相关 H5调用手机的摄像头拍照上传以及手机相册选取照片

H5调用手机的摄像头拍照上传以及手机相册选取照片语法： <input accept="audio/|video/|image/|MIME_type"> 提示：如

系统管理员/ 2022年09月25日 12:19/ 0 赞/ 309 阅读

相关 Android调用相机保存图片到相册

项目中需要使用相机拍照然后保存到相册中，然而保存后却发现相册中并没有这张图片，但是从相册的文件夹中可以看到。这说明相册没有及时刷新才会这样的。搜寻前辈的答案发现有两种解决方案，

约定不等于承诺〃/ 2022年08月17日 14:21/ 0 赞/ 367 阅读

相关移动端上传图片--调用手机的相册和相机

网上百度找到一个方法不错，借鉴：代码如下 html: <div class="head"> <a class="btn-2">

不念不忘少年蓝@/ 2022年05月16日 02:24/ 0 赞/ 278 阅读

相关 MUI调用手机相机拍照+压缩+上传

<div id="image" style="height: 130px;background: fff;padding-top: 10px;display: flex

谁借莪１个温暖的怀抱￠/ 2022年03月16日 05:14/ 0 赞/ 362 阅读

相关 apicloud app选择手机相册相机图片上传到服务器

效果图是这样的点击修改头像，会出现选项 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

男娘i/ 2022年02月27日 02:24/ 0 赞/ 908 阅读

相关 H5-移动端相机拍照(读取本地相册)(PC端读取本地相册)、压缩、预览、裁剪、上传功能开发汇总

最新更新时间：2019年04月21日17:56:04 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：H5端相机拍照原理、图片压缩

Dear 丶/ 2022年02月16日 03:45/ 0 赞/ 1305 阅读