3***@qq.com
3***@qq.com
  • 发布:2017-06-19 10:04
  • 更新:2017-06-19 12:54
  • 阅读:1801

在App中无法上传文件

分类:HTML5+

在App中,点击上传后,App处于类似死机状态。

php端,收不到上传请求。

但是使用网页可以直接上传文件。

2017-06-19 10:04 负责人:无 分享
已邀请:
3***@qq.com

3***@qq.com (作者)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
</head>
<body>
<form action="upload0.php" enctype="multipart/form-data" method="post">
<input type="file" name="photo" />
<input type="submit" value="上传" />
</form>
</body>
</html>

3***@qq.com

3***@qq.com (作者)

<?php
define('ROOT',dirname(FILE).'/');

    // echo "upload ok!";  
    if ($_SERVER['REQUEST_METHOD'] == 'POST') {  
        $ret = array(  
            'strings' => $_POST,  
            'error' => '0'  
        );  
        $fs = array();  
        //$prev = "C:\\phpStudy\\WWW\\Uploads\\H5P\\";  
        $prev = ROOT.'Uploads/H5P/' ; //.basename($_FILES['file']['name']);    

        // 枚举所有提交的文件  
        foreach ($_FILES as $name => $file) {  
            $fn = $file['name'];  
            $ft = strrpos($fn, '.', 0);  
            $fm = substr($fn, 0, $ft);  
            $fe = substr($fn, $ft);  
            $fp =  $prev . $fn;  
            //echo  $fp;  

            $fi = 1;  
            while (file_exists($fp)) { // 当提交的文件已经存在时则重命名  
                $fn = $fm . '[' . $fi . ']' . $fe;  
                $fp =  $prev . $fn;  
                $fi ++;  
            }  

            // 将临时文件保存到files目录  
            move_uploaded_file($file['tmp_name'], $fp);  

            $fs[$name] = array(  
                'name' => $fn,  
                'url' => $fp,  
                'type' => $file['type'],  
                'size' => $file['size']  
            );   
        }  

         $ret['files'] = $fs;  

        // 输出返回数据格式  
        echo json_encode($ret);   
    } else {  
        echo "{'error':'Unsupport GET request!'}";  
    }  

?>

3***@qq.com

3***@qq.com (作者)

例子文件

3***@qq.com

3***@qq.com (作者)

https://github.com/dcloudio/H5P.Server/tree/master/uploader
php文件就是根据官方这个例子改的。

App中的调用就是用H5+的demo上传例子测试的。

<!DOCTYPE HTML>
<html>

<head>  
    <meta charset="utf-8" />  
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
    <meta name="HandheldFriendly" content="true" />  
    <meta name="MobileOptimized" content="320" />  
    <title>Hello H5+</title>  
    <script type="text/javascript" src="../js/common.js"></script>  
    <script type="text/javascript" src="../js/castapp.js"></script>  
    <script type="text/javascript">  
        var server = "http://192.168.87.52/upload0.php";  
        //var server = "http://demo.dcloud.net.cn/helloh5/uploader/upload.php";  
        //var server = "http://192.168.87.52/H5PServer/doAction.php";  
        //ca.init();  
        //var server = "http://192.168.87.52/H5P/upload000";  
        var files = [];  
        //  
        // 上传文件  
        function upload() {  

            if(files.length <= 0) {  
                plus.nativeUI.alert("没有添加上传文件!");  
                return;  
            }  

/ var f = files[0];
ca.uploadFiles(server,f.path,function(newPath){
alert(newPath);
});
/

            outSet("开始上传:")  
            var wt = plus.nativeUI.showWaiting();  
            var task = plus.uploader.createUpload(server, {  
                    method: "POST"  
                },  
                function(t, status) { //上传完成  
                    console.log("createUpload!!!status:"+status);  
                    if(status == 200) {  
                        console.log("上传成功:" + t.responseText);  
                        outLine("上传成功:" + t.responseText);  
                        plus.storage.setItem("uploader", t.responseText);  
                        var w = plus.webview.create("uploader_ret.html", "uploader_ret.html", {  
                            scrollIndicator: 'none',  
                            scalable: false  
                        });  
                        w.addEventListener("loaded", function() {  
                            wt.close();  
                            w.show("slide-in-right", 300);  
                        }, false);  
                    } else {  
                        outLine("上传失败:" + status);  
                        wt.close();  
                    }  
                }  
            );  
            task.addData("client", "HelloH5+");  
            task.addData("uid", getUid());  
            for(var i = 0; i < files.length; i++) {  
                var f = files[i];  
                task.addFile(f.path, {  
                    key: f.name  
                });  
            }  
            console.log("createUpload!!!;;;url:"+task.url);  
            task.start();  
            console.log("createUpload!!!;;;111:");  
        }  
        // 拍照添加文件  
        function appendByCamera() {  
            plus.camera.getCamera().captureImage(function(p) {  
                appendFile(p);  
            });  
        }  
        // 从相册添加文件  
        function appendByGallery() {  
            plus.gallery.pick(function(p) {  
                appendFile(p);  
            });  
        }  
        // 添加文件  
        var index = 1;  

        function appendFile(p) {  
            var fe = document.getElementById("files");  
            var li = document.createElement("li");  
            var n = p.substr(p.lastIndexOf('/') + 1);  
            li.innerText = n;  
            fe.appendChild(li);  
            files.push({  
                name: "uploadkey" + index,  
                path: p  
            });  
            index++;  
            empty.style.display = "none";  
        }  
        // 产生一个随机数  
        function getUid() {  
            return Math.floor(Math.random() * 100000000 + 10000000).toString();  
        }  
    </script>  
    <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8" />  
</head>  

<body>  
    <header id="header">  
        <div class="nvbt iback" onclick="back()"></div>  
        <div class="nvtt">Uploader</div>  
        <div class="nvbt idoc" onclick="openDoc('Uploader Document','/doc/uploader.html')"></div>  
    </header>  
    <div id="dcontent" class="dcontent">  
        <br/>  
        <p class="heading">上传文件列表:</p>  
        <ul id="files" style="text-align:left;">  
            <p id="empty" style="font-size:12px;color:#C6C6C6;">无上传文件</p>  
        </ul>  
        <table style="width:100%;">  
            <tbody>  
                <tr>  
                    <td style="width:40%">  
                        <div class="button button-select" onclick="appendByCamera()">拍照</div>  
                    </td>  
                    <td style="width:40%">  
                        <div class="button button-select" onclick="appendByGallery()">相册选取</div>  
                    </td>  
                </tr>  
            </tbody>  
        </table>  
        <br/>  
        <div class="button" onclick="upload()">上 传</div>  
        <br/>  
        <!--<ul class="dlist">  
            <li class="ditem" onclick="appendByCamera()">拍照添加文件</li>  
            <li class="ditem" onclick="appendByGallery()">相册添加文件</li>  
        </ul>-->  
    </div>  
    <div id="output">  
        Uploader用于管理文件的上传,用于从本地上传各种文件到网络服务器,支持跨域访问操作。  
    </div>  
</body>  
<script type="text/javascript" src="../js/immersed.js"></script>  

</html>

3***@qq.com

3***@qq.com (作者)

搞定了:

晕,必须用域名才行,局域网IP不行。

该问题目前已经被锁定, 无法添加新回复