MUI 单个图片上传预览(拍照+系统相册):先选择->预览->上传提交 功能 代码案例

1、html部份

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <link href="../css/mui.min.css" rel="stylesheet" />  
        <script src="../js/mui.min.js"></script>  
        
        <script src="../js/jquery-1.9.min.js"></script>  
        <style>  
            .imageup{ width:100px; height: 36px; line-height:36px;}  
            .button{  width:100px; height: 50px; line-height:50px;}  
        </style>  
    </head>  
    <body>  
        <img id="headimg" src=''  height="150"  width="150">
        <p><a href="javascript:;" class="imageup">上传图片</a> </p> 
        <p><button onclick="upload();" class='button'> 提交</button></p>
        <script>  
            
            function plusReady(){  
                // 弹出系统选择按钮框  
                mui("body").on("tap",".imageup",function(){  
                    page.imgUp();  
                })  
                  
            }  
            var page=null;  
            page={  
                imgUp:function(){  
                    var m=this;  
                    plus.nativeUI.actionSheet({cancel:"取消",buttons:[  
                        {title:"拍照"},  
                        {title:"从相册中选择"}  
                    ]}, function(e){//1 是拍照  2 从相册中选择  
                        switch(e.index){  
                            case 1:appendByCamera();break;  
                            case 2:appendByGallery();break;  
                        }  
                    });  
                }  
                //摄像头  
            }  
              
            // 拍照添加文件
            function appendByCamera(){
                plus.camera.getCamera().captureImage(function(e){
                    console.log(e);
                    plus.io.resolveLocalFileSystemURL(e, function(entry) { 
                    var path = entry.toLocalURL(); 
                    document.getElementById("headimg").src = path; 
                    //就是这里www.bcty365.com 
                    }, function(e) { 
                        mui.toast("读取拍照文件错误:" + e.message); 
                    }); 
    
                });    
            }
            // 从相册添加文件
            function appendByGallery(){
                plus.gallery.pick(function(path){
                    document.getElementById("headimg").src = path; 

                });
            }
            
              
            //服务端接口路径
            var server = "http://www.test.cn/aaa.php";
            //获取图片元素
            var files = document.getElementById('headimg');
            // 上传文件
            function upload(){
                console.log(files.src);
                var wt=plus.nativeUI.showWaiting();
                var task=plus.uploader.createUpload(server,
                    {method:"POST"},
                    function(t,status){ //上传完成
                        if(status==200){
                            alert("上传成功:"+t.responseText);
                            wt.close(); //关闭等待提示按钮
                        }else{
                            alert("上传失败:"+status);
                            wt.close();//关闭等待提示按钮
                        }
                    }
                );
                //添加其他参数
                task.addData("name","test");
                task.addFile(files.src,{key:"dddd"});
                task.start();
            }  
            if(window.plus){  
                plusReady();  
            }else{  
                document.addEventListener("plusready",plusReady,false);  
            }       
      
        
              
        </script>  
    </body>   
</html>  

 

2、PHP部分:

<?php 
echo "<pre>";
print_r($_POST);
print_r($_FILES);
 ?>

 

3、操作步骤:

上传图片-》选择拍照还是系统相册-》提交;

MUI 单个图片上传预览

 

MUI 单个图片上传预览

 

MUI 单个图片上传预览

 

MUI 单个图片上传预览

    A+
发布日期:2017年05月10日 13:43:22  所属分类:MUI
最后更新时间:2017-12-15 19:24:36
评分: (2 票;平均数5.00 ;最高评分 5 ;用户总数2;总得分 10;百分比100.00)
付杰
Linux C++网络编程篇
  • ¥ 798.0元
  • 市场价:1298.0元
Python爬虫教程:零基础上手Scrapy分布爬虫
  • ¥ 388.0元
  • 市场价:388.0元
React.js视频教程:全新React.js16.12技术合集
  • ¥ 69.0元
  • 市场价:69.0元
Java全栈教程
  • ¥ 298.0元
  • 市场价:498.0元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  0   博主  0

  1. 头像 PFC 0

    这篇文章最后在手机上最后运行出现上传图片的时候一直在等待是为什么?