song
/
wjs_app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
							
<!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,viewport-fit=cover" />  
        <meta name="apple-mobile-web-app-capable" content="yes" />  
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />  
    </head>  
    <body>  
        <style>  
            .dynamic_images ul {  
                margin: 0;  
                padding: 0;  
            }  
            .dynamic_images ul li {  
                position: relative;  
                display: inline-block;  
                margin-top: 10px;  
                margin-bottom: 10px;  
                margin-right: 10px;  
                float: left;  
                list-style: none;  
            }  
            .dynamic_images ul li img {  
                width: 50px;  
                height: 50px;  
                border-radius: 5px;  
            }  
            .del {  
                display: inline-block;  
                position: absolute;  
                top:6px;  
                right: 0px;  
                width: 12px;  
                height: 2px;  
                background: #ED544D;  
                line-height: 0;  
                font-size: 0;  
                vertical-align: middle;  
                -webkit-transform: rotate(45deg);  
            }  
            .del:after {  
                content: "/";  
                display: block;  
                width: 12px;  
                height: 2px;  
                background: #ED544D;  
                -webkit-transform: rotate(-90deg);  
            }  
        </style>  
    <header class="mui-bar mui-bar-nav" >  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <div class="mui-title">图片预览上传</div>  
    </header>  
    <div class="mui-content" >  
        <form id='from1' enctype = "multipart/form-data">  
            <div style="margin-top: 16px;margin-bottom: 10px;">  
                <span class="title">添加照片（选填）</span>  
                <span id="picnum" style="float: right;margin-right: 20px;font-size: 12px; color: #666666;">0/9</span>  
            </div>  
            <div class="dynamic_images" style="background-color: #ffffff;height: 70px;width: 100%;padding-left: 15px;padding-right: 15px;">  
                <ul class="row mui-input-row">  
                    <li>  
                        <img src="img/iconfont-tianjia.png" id="addnew" onclick="showActionSheet();" />  
                    </li>  
                </ul>  
            </div>  
            <div style="margin-top: 16px;width: 100%;text-align: center;">  
                <button  style="background-color: #169BD5;height: 40px;width: 266px;font-size: 14px;color: #FFFFFF;border-radius: 5px;border: 0px;" type="button" onclick="submits()">提交</button>  
            </div>  
        </form>  
    </div>  
    </body>  
<script src="js/mui.min.js"></script>  
<script src="js/jquery.min.js"></script>  
<script type="text/javascript">  
    mui.init({  
        swipeBack:true //启用右滑关闭功能  
        });  

    function submits(){ 
        var url='http://139.196.105.31:8881/upload/multipleImageUpload'  
         task = plus.uploader.createUpload( url,   
            { method:"POST"},  
            function (t, status ) {  
                // 上传完成  
                if ( status == 200 ) {   
                   // wt.close(); 
					
                    console.log( "Upload success: " + JSON.stringify(t));  
                } else {  
					//mui.alert();
                    //wt.close();  
                     console.log( "Upload failed: " +JSON.stringify(status) );  
                }  
            });  
            for(var i = 0; i < files.length; i++) {    
                var f = files[i];
				var j = i + 1;
					var temp = 'files' + j;
                task.addFile(f.path,{  
                    key: temp
                }); 
            }  
			
            task.addData('name',name);  
            task.start();
			 // plus.nativeUI.showWaiting();
    }  

	

    var files = [];  
    // 添加文件  
    var index = 1;  
    var newUrlAfterCompress;  
    function appendFile(p) {  
        files.push({  
            name: "files" + index,//这个值服务器会用到，作为file的key  
            path: p  
        });  
        index++;  
    }  
    function showActionSheet() {  
        if($(".dynamic_images ul li").length<10){  
            var bts = [{  
                title: "拍照"  
            }, {  
                title: "从相册选择"  
            }];  
            plus.nativeUI.actionSheet({  
                    cancel: "取消",  
                    buttons: bts  
                },  
            function(e) {  
                    if (e.index == 1) {  
                        getImage();  
                    } else if (e.index == 2) {  
                        galleryImgs();  
                    }  
                }  
            );  
        }else{  
            plus.nativeUI.alert('最多上传四张图片!');  
        }  
    }  
    // 产生一个随机数  
    function getUid() {  
        return Math.floor(Math.random() * 100000000 + 10000000).toString();  
    }  
    //拍照  
    function getImage() {  
        var cmr = plus.camera.getCamera();  
        cmr.captureImage(function(p) {  
            plus.io.resolveLocalFileSystemURL(p, function(entry) {  
                var localurl = entry.toLocalURL(); // 
				var name=localurl.substring(localurl.lastIndexOf("/")+1);
                $(".dynamic_images ul").prepend("<li onclick='delImg(this)'><img src='" + localurl + "' /><span class='del'></span></li>");  
                var dstname="_downloads/"+name;//设置压缩后图片的路径  
                newUrlAfterCompress=compressImage(localurl,dstname);  
                appendFile(dstname);  
                document.getElementById("picnum").innerText=files.length+'/9';  
            });  
        });  
    }  
    function galleryImgs() {  
        // 从相册中选择图片  
        var num=9;  
        if(10-$(".dynamic_images ul li").length>=1){  
            num=10-$(".dynamic_images ul li").length;  
        }  
        plus.gallery.pick(function(e) {  
            for (var i = 0; i < e.files.length; i++) {  
				var name=e.files[i].substring(e.files[i].lastIndexOf("/")+1);
                $(".dynamic_images ul").prepend(  
                    "<li  onclick='delImg(this)'><img  src='" + e.files[i] + "'/><span class='del'></span></li>");  
                    var dstname="_downloads/"+name;//设置压缩后图片的路径  
                    newUrlAfterCompress=compressImage(e.files[i],dstname);  
                    appendFile(dstname);  
            }  
            document.getElementById("picnum").innerText=files.length+'/9';  
        }, function(e) {   
            console.log("取消选择图片");  
        }, {  
            filter: "image",  
            multiple: true,  
            maximum:num,  
            system:false,  
            onmaxed:function(){  
                plus.nativeUI.alert('最多只能选择九张图片');  
            }  
        });  
    }  
    //压缩图片，这个比较变态的方法，无法return  
    function compressImage(src,dstname) {  
        //兼容  
        if (0 != src.toString().indexOf("file://")) {  
            src = "file://" + src;  
        }  
        plus.zip.compressImage({  
                src: src,  
                dst: dstname,  
                overwrite:true,  
                quality: 10  
            },  
            function(event) {  
                //console.log("Compress success:"+event.target);  
                return event.target;  
            },  
            function(error) {  
                console.log(error);  
                return src;  
            });  

    }  
     function delImg(obj)  
     {  
        var list =document.getElementsByTagName('li');  
        for(var i=0;i<list.length;i++){  
            list[i].index=i;  
        }  
        var idx=2-obj.index;  
        var ul=obj.parentNode;  
        var btnArray=['是','否'];  
        plus.nativeUI.confirm("确定要删除此图?",function(e){  
            if(e.index==0){  
                ul.removeChild(obj);  
                files.splice(idx,1);  
                document.getElementById("picnum").innerText=Number(files.length)+'/9';  
            }  
        },{"buttons":btnArray})  
     }  
</script>  
</html>