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,因此如果服务器需要保存图片 需要解码。

  • 相关阅读:
    元素单侧阴影效果
    有关动画的总结
    吸底效果
    使用seajs来引入js代码
    引用POPUI来实现弹窗效果,且弹窗中的内容可以点击事件
    Js文本溢出自动添加省略号ellipsis
    line-hieght与vertical-align的区别与联系
    实现文本框中输入限制字数的效果
    下拉菜单的实现
    基本SQL命令 (1.SQL命令使用规则/2.库管理/3.表管理/4.表记录管理/5.更改库,库的默认字符集/6.连接数据库的过程/7.数据类型)
  • 原文地址:https://www.cnblogs.com/zhiyin/p/5800579.html
Copyright © 2011-2022 走看看