MUI uploader 秒傳圖片

  1 var f1 = null;
  2 var picarr = new Array();
  3 var basearr = new Array();
  4 var lat = "",
  5     longt = "";
  6 var files = [];
  7 // 上傳文件
  8 function upload() {
  9     
 10     
 11     var wt = plus.nativeUI.showWaiting();
 12     var task = plus.uploader.createUpload(server + "?action=dynamicadd", {
 13             method: "POST"
 14         },
 15         function(t, status) { //上傳完成
 16             if (status == 200) {
 17 //                        console.log("上傳成功：" + t.responseText);
 18                 mui.toast("發表成功");
 19                 //插入本地數據庫
 20                 wt.close();
 21                 mui.back();
 22             } else {
 23                 console.log("上傳失敗：" + status);
 24                 wt.close();
 25             }
 26         }
 27     );
 28     var title = $("#tbxtitle").val();
 29     if (title.length < 1) {
 30         wt.close();
 31         mui.toast("內容不能爲空");
 32     } else { 
 33         task.addData("title", title);
 34         task.addData("uid", getUid());
 35         task.addData("userid", plus.storage.getItem("policeid"));
 36         //task.addData("lat", lat.toString());
 37         //task.addData("longt", longt.toString());
 38 //                console.log("準備上傳"+files.length+"個圖片");
 39         for (var i = 0; i < files.length; i++) {
 40             var f = files[i];
 41 //                    console.log("準備上傳的圖片路徑："+f.path);
 42             task.addFile(f.path, {
 43                 key: f.name
 44             });
 45         }
 46         task.start();
 47     }
 48     
 49 }
 50 
 51 // 添加文件
 52 var index = 1;
 53 var newUrlAfterCompress;
 54 function appendFile(p) {
 55     files.push({
 56         name: "uploadkey" + index,//這個值服務器會用到，做爲file的key
 57         path: p
 58     });
 59     index++;
 60 }
 61 // 產生一個隨機數
 62 function getUid() {
 63     return Math.floor(Math.random() * 100000000 + 10000000).toString();
 64 }
 65 
 66 function getposition() {
 67     plus.geolocation.getCurrentPosition(function(p) {
 68         var codns = p.coords; // 獲取地理座標信息；
 69         lat = codns.latitude; //獲取到當前位置的緯度；
 70         longt = codns.longitude; //獲取到當前位置的經度
 71     }, function(e) {
 72         //alert("獲取百度定位位置信息失敗：" + e.message);
 73     }, {
 74         provider: 'baidu'
 75     });
 76 }
 77 
 78 function galleryImgs() { // 從相冊中選擇圖片
 79     plus.gallery.pick(function(e) {
 80         $(".dynamic_images ul li").remove(".pickimg");
 81 //                console.log("選擇了"+e.files.length+"個圖片");
 82         for (var i = 0; i < e.files.length; i++) {
 83             if (i < 9) {
 84                 picarr[i] = e.files[i];
 85                 $(".dynamic_images ul").prepend("<li class='pickimg'><img src='" + e.files[i] + "' /></li>");
 86                 var dstname="_downloads/"+getUid()+".jpg";//設置壓縮後圖片的路徑
 87                 newUrlAfterCompress=compressImage(e.files[i],dstname);
 88                 appendFile(dstname);
 89                 //console.log(e.files[i]);
 90                 //console.log(dstname);
 91             }
 92         }
 93     }, function(e) {
 94         console.log("取消選擇圖片");
 95     }, {
 96         filter: "image",
 97         multiple: true
 98     });
 99 }
100 
101 //壓縮圖片，這個比較變態的方法，沒法return
102 function compressImage(src,dstname) {
103     //var dstname="_downloads/"+getUid()+".jpg";
104     plus.zip.compressImage({
105             src: src,
106             dst: dstname,
107             overwrite:true,
108             quality: 20
109         },
110         function(event) {
111             //console.log("Compress success:"+event.target);
112             return event.target;
113         },
114         function(error) {
115             console.log(error);
116             return src;
117             //alert("Compress error!");
118         });
119     
120 }
121 //旋轉圖片，本文沒用到
122 function rotateImage() {
123     plus.zip.compressImage({
124             src: "_www/a.jpg",
125             dst: "_doc/a.jpg",
126             rotate: 90 // 旋轉90度
127         },
128         function() {
129             alert("Compress success!");
130         },
131         function(error) {
132             alert("Compress error!");
133         });
134 }
135 
136 function showActionSheet() {
137     var bts = [{
138         title: "拍照"
139     }, {
140         title: "從相冊選擇"
141     }];
142     plus.nativeUI.actionSheet({
143             cancel: "取消",
144             buttons: bts
145         },
146         function(e) {
147             if (e.index == 1) {
148                 getImage();
149             } else if (e.index == 2) {
150                 galleryImgs();
151             }
152         }
153     );
154 }
155 //拍照
156 function getImage() {
157     var cmr = plus.camera.getCamera();
158     cmr.captureImage(function(p) {
159         plus.io.resolveLocalFileSystemURL(p, function(entry) {
160             var localurl = entry.toLocalURL(); //
161             $(".dynamic_images ul li").remove(".pickimg");
162             $(".dynamic_images ul").prepend("<li class='pickimg'><img src='" + localurl + "' /></li>");
163         });
164     });
165 }

頁面初始化相關

document.addEventListener("plusready", plusReady, false);

function plusReady() {
    document.getElementById("addnew").addEventListener("tap", function() {
        showActionSheet();//拍照仍是相冊
    });
    document.getElementById("fabiao").addEventListener("tap", function() {
        upload();//上傳文件
    });
    plus.nativeUI.closeWaiting();

}

html代碼

<div class="dynamic_images">
    <ul>
        <!--<li><img src="images/cbd.jpg"></li>-->
        <li><img src="images/iconfont-tianjia.png" id="addnew"></li>
        <!--<li><span class="mui-icon iconfont icon-jia2" style="font-size: 28px;"></span></li>-->

    </ul>
</div>

 

asp代碼

 1 string file = "";
 2 int count = Request.Files.Count;
 3 
 4 for (int i = 0; i < count; i++)
 5 {
 6     int l = Request.Files["uploadkey" + (i + 1)].ContentLength;
 7     byte[] buffer = new byte[l];
 8     Stream s = Request.Files["uploadkey" + (i + 1)].InputStream;
 9     System.Drawing.Bitmap image = new System.Drawing.Bitmap(s);
10     string imgname = Common.GetGuid() + ".jpg";
11     string path = "Images/" + DateTime.Now.ToString("yyyyMMdd") + "/";
12     if (!Directory.Exists(HttpContext.Current.Server.MapPath(path)))
13     {
14         System.IO.Directory.CreateDirectory(HttpContext.Current.Server.MapPath(path));
15     }
16     image.Save(Server.MapPath(path + "/" + imgname));
17 }

css代碼

<style type="text/css">
    .dynamic_images {
        width: 100%;
    }
    
    .dynamic_images ul {
        margin: 0;
        padding: 0;
    }
    
    .dynamic_images ul li {
        float: left;
        list-style: none;
        width: 25%;
    }
    
    .dynamic_images ul li img {
        width: 98%;
        height: 80px;
    }
</style>

原文出自：http://blog.csdn.net/moniteryao/article/details/50761070