图片上传（批量）暂停或停止单个上传任务无效及其他问题

分类：HTML5+

uploader

首先描述下批量上传的需求：

单独追踪显示每一个上传任务的状态即当前上传的百分比
可以停止或暂停上传单个任务

简单描述一下bug :

使用循环获取图片并上传时，只有最后一张图片显示当前上传状态，具体原因未查明

for (var i=0,len=e.files.length;i<len;i++) {  
                    showImg(e.files[i]);  
                }

关于这个bug，已通过相关代码规避
2.停止或暂停上传任务代码无效，目前也就是这个问题木有解决，求救啊，~~~~(>_<)~~~~
3.statechange-->t.state=4 落后于UploadCompletedCallback ，如果上传后返回status=413或其他状态，照片上传的当前状态反而不正确，所以就不需要在t.state=4内更改追踪状态代码了。我测试的是这样。
具体的代码如下：


<!DOCTYPE html>  
<html>  

<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title>添加照片</title>  
    <link href="css/mui.min.css" rel="stylesheet" />  
    <link rel="stylesheet" href="../css/head.css">  
    <style type="text/css">  
        .mui-title {  
            font-family: simhei;  
        }  
        .mui-content {  
            background-color: #FFFFFF;  
            margin-top: 10px;  
        }  
        .div_scene {  
            margin: 0 5px;  
        }  
        .div_img {  
            width: 50%;  
            float: left;  
            position: relative;  
        }  
        .div_img img {  
            width: 98%;  
            margin: 0 auto;  
            height: 150px;  
        }  
        .imgbottom {  
            position: absolute;  
            width: 98%;  
            height: 20px;  
            z-index: 10;  
            bottom: 5px;  
            background: rgba(51, 120, 195, 0.7);  
            color: white;  
            visibility: hidden;  
            z-index: 100;  
        }  
        .imgbottom span {  
            padding-left: 2px;  
        }  
        .mui-icon-clear {  
            font-size: 20px;  
        }  
    </style>  
</head>  

<body>  
    <header class="mui-bar mui-bar-nav">  
        <a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>  
        <h1 class="mui-title">添加照片</h1>  
        <a class="mui-icon mui-icon-plus mui-pull-right" id='imgadd'></a>  
    </header>  

    <div class="mui-content">  
        <div style="clear: both;"></div>  
        <div class="div_scene" id="div_scene">  
            <!--<div class="div_img">  
                <img src="../images/loginback.png" />  
                <div class="imgbottom">  
                    <span class="mui-pull-left">ddd</span>  
                    <span class="mui-pull-right mui-icon mui-icon-clear"></span>  
                </div>  
            </div>  
        -->  
        </div>  
    </div>  

    <script src="js/mui.js"></script>  
    <script type="text/javascript" charset="utf-8">  
        var server = "http://demo.dcloud.net.cn/helloh5/uploader/upload.php";  
        mui.init();  
        mui.plusReady(function() {  
            document.getElementById("imgadd").addEventListener('tap', function() {  
                galleryImgs();  
            });  
        });  
        var tasks = new Array();  
        var urls = new Array();  

        function galleryImgs() {  
            plus.gallery.pick(function(e) {

// for (var i=0,len=e.files.length;i<len;i++) {
// showImg(e.files[i]);
// }
asycn(e.files, function(f, next) {
showImg(f, function() {
next();
});
}, function() {
console.log('ok');
});
}, function(e) {
mui.toast("未选择图片");
}, {
filter: "image",
multiple: true
});
};

        function showImg(url, cb) {  
            // 兼容以“file:”开头的情况  
            if (0 != url.toString().indexOf("file://")) {  
                url = "file://" + url;  
            }  
            if (!isCon(urls, url)) {  
                urls.push(url);  
                    var htmlstr = '<div class="div_img"><img src="' + url + '" /><div class="imgbottom" id="' + url + '"><span class="mui-pull-left"></span>';

//目前该bug官方未解决，先隐掉 2015-05-25 1020450921@qq.com edit
// htmlstr+='<span class="mui-pull-right mui-icon mui-icon-clear" onclick="javascript:uploaderabort(this)" data-id="' + url + '"></span>';
htmlstr+='</div></div>';
document.getElementById("div_scene").innerHTML += htmlstr;
UploaderImg(url, cb);
}
};

        function UploaderImg(url, cb) {  
            var imgb = document.getElementById(url);  
            var sp1 = imgb.firstChild;  
            var sp2 = imgb.lastChild;  
            var task = plus.uploader.createUpload(server, {  
                    method: "POST"  
                },  
                function(t, status) {  
                    console.log(JSON.stringify(t));  
                    if (status == 200) {  
                        var data = JSON.parse(t.responseText);  
                        //图片云连接地址上传到服务器  
                        sp1.innerText = "上传成功";  
                        sp2.style.display = 'none';  
                        if (cb)  
                            cb();  
                    } else {  
                        sp1.innerText = "上传失败";  
                    }  
                });  
            task.addFile(url, {  
                key: Math.random().toString()  
            });  
            //              task.addData("client", "HelloH5+");  
            task.addData("uid", getUid());  
            task.addEventListener("statechanged", function(t, status) {  
                switch (t.state) {  
                    case 1: // 开始  
                        imgb.style.visibility = 'visible';  
                        sp1.innerText = "开始上传...";  
                        console.log(sp1.parentElement.id);  
                        break;  
                    case 2: // 已连接到服务器  
                        sp1.innerText = "开始上传...";  
                        break;  
                    case 3:  
                        var a = t.uploadedSize / t.totalSize * 100;  
                        sp1.innerText = "已上传" + parseInt(a) + "%";  
                        break;  
                    case 4:   
                                                    //t.state=4 落后于UploadCompletedCallback ，如果上传后返回status=413或其他状态，照片上传的当前状态反而不正确，所以就不需要在t.state=4内更改追踪状态代码了  
                        sp2.style.display = 'none';  
                        break;  
                }  
            });  
            task.start();  
            var tas = {  
                path: url,  
                intask: task  
            };  
            tasks.push(tas);  
        };  

        function uploaderabort(obj) {  
            var path = obj.getAttribute('data-id');  
            tasks.some(function(tas) {  
                console.log(tas.path);  
                if (tas.path == path) {  
                    console.log('url: ' + tas.intask.url);  
                    console.log('state: ' + tas.intask.state);  
                    console.log('uploadsize: ' + tas.intask.uploadedSize);  
                    tas.intask.pause();  
                    tas.intask.abort();  
                }  
            });  
        };  
        /**  
         * @description 这段代码是精华啊，通过递归实现阻塞，老大出品，就是流弊  
         * @param {Object} list  
         * @param {Object} cb_exec  
         * @param {Object} cb_end  
         */  
        function asycn(list, cb_exec, cb_end) {  
            var each = function(_list, cb) {  
                if (_list.length < 1) {  
                    return cb_end && cb_end();  
                }  
                cb(_list.shift(), function() {  
                    each(list, cb);  
                });  
            }  
            each(list, cb_exec);  
        };  

        function isCon(arr, val) {  
            for (var i = 0, len = arr.length; i < len; i++) {  
                if (arr[i] == val)  
                    return true;  
            }  
            return false;  
        };  
         // 产生一个随机数  
        function getUid() {  
            return Math.floor(Math.random() * 100000000 + 10000000).toString();  
        }  
    </script>  
</body>

</html>

2015-05-19 18:36 负责人:无分享