zoukankan      html  css  js  c++  java
  • HTML5+ 拍照上传 和选择文件上传

    HTML 页面内容包含以下标签即可:

        

                       <input id="btn_select" type="button"  value="从相册选择" />
                       <input id="btn_takephoto" type="button"  value="拍照" />
                       <img id="imgViewer" src="" alt="暂无图片" width="100" height="100"/>
                       <input id="btn_save" type="button" value="确认上传" />

    JS实现部分:

    (function() {
        var url = "XXXXXXXXXX上传的文件地址";
        
        var file;
        var w = null;
        // H5 plus事件处理
        function plusReady() {
    
            //w=plus.nativeUI.showWaiting();
            //H5 准备好的时候 绑定拍照事件
            
            //拍照单机事件
            $("#btn_takephoto").bind("click", function() {
                //拍照
                plus.camera.getCamera().captureImage(function(p) {
                    plus.io.resolveLocalFileSystemURL(p, function(entry) {
                        console.log(entry.toLocalURL());
                        $("#imgViewer").attr("src", entry.toLocalURL());
                    }, function(e) {
                        outLine("读取拍照文件错误:" + e.message);
                    });
    
                });
            });
             
             //从相册选择
            $("#btn_select").bind("click", function() {
                plus.gallery.pick(function(p) {
                    console.log(p);
                    $("#imgViewer").attr("src", p);
                });
            });
            
            //上传文件
            $("#btn_save").bind("click", function() {
                var wt = plus.nativeUI.showWaiting();
              //根据路径读取到文件
              plus.io.resolveLocalFileSystemURL($("#imgViewer").attr("src"),function(entry){
                  entry.file( function(file){
                var fileReader = new plus.io.FileReader();
                fileReader.readAsDataURL(file);
                
                fileReader.onloadend = function(e) {
                    var f = $("#imgViewer").attr("src");
                    var filename = f.replace(f.substring(0, f.lastIndexOf('/') + 1), '');
                    var param = {
                        fileName: filename
                        dataInput: e.target.result.toString()
                    };
                    //自定义的ajax方法 
                    ToolHelper.AsyncAjax(url, param, function(data, para) {
                        wt.close();
                        if (data[0].responseCode != undefined && data[0].responseCode != "") {
                            $.dialog.alert(data[0].responseMessage);
                        } else {
                            $.dialog.alert("上传成功");
                        }
                    });
                }
        
             });
              });
                
                
    
                
            });
        }
        if (window.plus) {
            plusReady();
        } else {
            document.addEventListener("plusready", plusReady, false);
        }
    
        return BaseObj = {
            save: saveEdit
        };
    })();
    JavaScript

    以上两个部分 用到了 dcloud html+中的  相机相关事件和方法,以及IO 根据地址 获取文件流的方法,上传到服务器的图片为base64,因此如果服务器需要保存图片 需要解码。

  • 相关阅读:
    格式化时间
    鼠标经过,图片放大事件
    reboot 后 Docker服务及容器自动启动设置
    gin 单个文件函数 上传文件到本地目录里
    深度Linux deepin更新,防火墙操作
    第四篇 mybatis的运行原理(1):重要组件的介绍
    第三篇 常用配置和动态SQL
    第二篇 mybatis的入门
    记一次强转bug
    第一篇 mybatis的简介
  • 原文地址:https://www.cnblogs.com/zhiyin/p/5800579.html
Copyright © 2011-2022 走看看