H5+APP混合开发上传图片

Posted 2023-03-19

参考技术A mui.init()

  var page=null;

  page=

      imgUp:function()

          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)

          plus.io.resolveLocalFileSystemURL(e, function(entry)

        // 将路径转为网络路径进行图片预览

          var path = entry.toRemoteURL();

          document.getElementById('preview').src = path

          $('.previewimage')[0].style.display = 'block'

            $('.imageBox')[0].style.display = 'none'

          , function(e)

              mui.toast("读取拍照文件错误：" + e.message);

          );

      );

 

// 从相册选取文件

function appendByGallery()

          plus.gallery.pick(function(e)

             // 将本地路径转为相对路径，然后再将相对路径转为网络路径，进行图片的预览

            plus.io.resolveLocalFileSystemURL(plus.io.convertLocalFileSystemURL(e), function(entry)

              var path = entry.toRemoteURL();

              document.getElementById('preview').src = path

              $('.previewimage')[0].style.display = 'block'

                $('.imageBox')[0].style.display = 'none'

              , function(e)

                  mui.toast("读取拍照文件错误：" + e.message);

              );

      );

 

var ImgList = []

function getfiles()

        var imageurl = document.getElementById("preview").src

        var p = new Promise(function (resolve, reject)

            // 将网络路径转为本地的路径，再将本地的路径转为file 

            plus.io.resolveLocalFileSystemURL( plus.io.convertLocalFileSystemURL(imageurl), function( entry )

            // 可通过entry对象操作文件

            entry.file( function(file)

                ImgList.push(file)   

                resolve(ImgList[0])

            );

            , function ( e )

                alert( "Resolve file URL failed: " + e.message );

            )

        )

      return p

   

// 调用转换路径的函数

        getfiles()

    // 等待转化完成进行上传

        .then(res =>

            //  上传的地址

         // plus.uploader.createUpload('url',,function())  

      // 只能是http://或者是https://开头的地址，上传的方式，function() 回调函数

            var task = plus.uploader.createUpload( "url",

                method:"POST",

                function ( t, status )

                    // 上传完成

                    if ( status == 200 )

                  // 图片上传完成，可进行下一步的操作

                        alert( "Upload success: " + t.url );

                    else

                        alert( "Upload failed: " + status );

                   

               

            );

            // 要上传的文件file，也可以是本地路径的

            task.addFile( res, key:"img" );   //类似fromData.append('img',document.getElementById('submitImage').files[0])

            // 加上文件上传的其他参数

            task.addData( "task_id", taskID );

            // 设置请求头，若服务器需要校验请求头

            task.setRequestHeader("Authorization",localStorage.getItem('mytoken'))

            //task.addEventListener( "statechanged", onStateChanged, false );

            // 开始上传

            task.start()

        )

HTML5 开发APP(打开相册以及图片上传)

   我们开发app，常常会遇到让用户上传文件的功能。比如让用户上传头像。我公司的业务要求是让用户上传支付宝收款二维码，来实现用户提现的功能。想要调用相册要靠HTML Plus来实现。先上效果图

基本功能是点击按钮就上传图片，然后获取到图片在服务器上的路径。

 首先我们要打开相册，使用gallery模块管理系统相册来打开相册

        

 

mui(\'#shangchuan\')[0].addEventListener(\'tap\',function(){
chooseImg();
})
function chooseImg(){
plus.gallery.pick(

//打开成功的回调函数
function(paths){

},

 //打开失败的回调函数
function(e){mui.toast(e.Message);},

//filter文件类型，gallery下的pick 是可以选择视频的。maximum是选择的个数
{filter:"image",system:false,multiple:true,maximum:3}
)
}

现在我们已经可以打开相册了，成功了第一步。接下来就是上传图片了。上传图片的代码在打开成功的回调函数中来执行

function chooseImg(){
plus.gallery.pick(
function(paths){

//嗯，你要找的就是这+++++
plus.nativeUI.showWaiting();
var task = plus.uploader.createUpload(

//你要上传的后台文件地址，我后面会给一个php 源码的
\'http://www.************8y/upload.php\',
{ method:"POST"},
function (t,status){
plus.nativeUI.closeWaiting();

console.log(t.responseText);

//t.responseText里会返回数据如下

//{"uper0":{"name":"uper0","url":"S7b3264117722a8a16882e41fe6dd089.jpg","type":"image\\/jpeg","size":31499}}

//看到url了吧。可以找到这张图片上传后的路径了，下面可以根据自己功能写自己的代码了。
mui.toast(\'上传成功\');
}
);
for(i in paths.files){
task.addFile(paths.files[i],{key:\'uper\'+i,\'name\':paths.files[i].substr(paths.files[i].lastIndexOf(\'/\'))});
}
task.start();
},
function(e){mui.toast(e.Message);},
{filter:"image",system:false,multiple:true,maximum:3}
)
}

 

 

附加PHP代码：

<?php
if ($_SERVER[\'REQUEST_METHOD\'] == \'POST\') {
$fs=array();
foreach ( $_FILES as $name=>$file ) {
if(move_uploaded_file($file[\'tmp_name\'],$file[\'name\'])){
$fs[$name]=array(\'name\'=>$name,\'url\'=>$file[\'name\'],\'type\'=>$file[\'type\'],\'size\'=>$file[\'size\']);
}else{
$fs[$name]=array(\'name\'=>$name,\'url\'=>\'error\',\'type\'=>$file[\'type\'],\'size\'=>$file[\'size\']);
}
}
echo json_encode($fs);
}else{
echo "{\'error\':\'Unsupport GET request!\'}";
}
?>

ok.上传图片的功能这样就完成了。