hbuilder mui uploader图片上传到服务器完整版(ASP.NET)

html布局，比较简单，模仿微信的：

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

页面初始化的一些操作：

1. document.addEventListener("plusready", plusReady, false);
2. function plusReady() {
3. document.getElementById("addnew").addEventListener("tap", function() {
4. showActionSheet();//拍照还是相册
5. });
6. document.getElementById("fabiao").addEventListener("tap", function() {
7. upload();//上传文件
8. });
9. plus.nativeUI.closeWaiting();
10. }

页面中js部分

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. var wt = plus.nativeUI.showWaiting();
10. var task = plus.uploader.createUpload(server + "?action=dynamicadd", {
11. method: "POST"
12. },
13. function(t, status) { //上传完成
14. if (status == 200) {
15. //                      console.log("上传成功：" + t.responseText);
16. mui.toast("发表成功");
17. //插入本地数据库
18. wt.close();
19. mui.back();
20. } else {
21. console.log("上传失败：" + status);
22. wt.close();
23. }
24. }
25. );
26. var title = $("#tbxtitle").val();
27. if (title.length < 1) {
28. wt.close();
29. mui.toast("内容不能为空");
30. } else {
31. task.addData("title", title);
32. task.addData("uid", getUid());
33. task.addData("userid", plus.storage.getItem("policeid"));
34. //task.addData("lat", lat.toString());
35. //task.addData("longt", longt.toString());
36. //              console.log("准备上传"+files.length+"个图片");
37. for (var i = 0; i < files.length; i++) {
38. var f = files[i];
39. //                  console.log("准备上传的图片路径："+f.path);
40. task.addFile(f.path, {
41. key: f.name
42. });
43. }
44. task.start();
45. }
46. }
47. // 添加文件
48. var index = 1;
49. var newUrlAfterCompress;
50. function appendFile(p) {
51. files.push({
52. name: "uploadkey" + index,//这个值服务器会用到，作为file的key
53. path: p
54. });
55. index++;
56. }
57. // 产生一个随机数
58. function getUid() {
59. return Math.floor(Math.random() * 100000000 + 10000000).toString();
60. }
61. function getposition() {
62. plus.geolocation.getCurrentPosition(function(p) {
63. var codns = p.coords; // 获取地理坐标信息；
64. lat = codns.latitude; //获取到当前位置的纬度；
65. longt = codns.longitude; //获取到当前位置的经度
66. }, function(e) {
67. //alert("获取百度定位位置信息失败：" + e.message);
68. }, {
69. provider: 'baidu'
70. });
71. }
72. function galleryImgs() { // 从相册中选择图片
73. plus.gallery.pick(function(e) {
74. $(".dynamic_images ul li").remove(".pickimg");
75. //              console.log("选择了"+e.files.length+"个图片");
76. for (var i = 0; i < e.files.length; i++) {
77. if (i < 9) {
78. picarr[i] = e.files[i];
79. $(".dynamic_images ul").prepend("<li class='pickimg'><img src='" + e.files[i] + "' /></li>");
80. var dstname="_downloads/"+getUid()+".jpg";//设置压缩后图片的路径
81. newUrlAfterCompress=compressImage(e.files[i],dstname);
82. appendFile(dstname);
83. //console.log(e.files[i]);
84. //console.log(dstname);
85. }
86. }
87. }, function(e) {
88. console.log("取消选择图片");
89. }, {
90. filter: "image",
91. multiple: true
92. });
93. }
94. //压缩图片，这个比较变态的方法，无法return
95. function compressImage(src,dstname) {
96. //var dstname="_downloads/"+getUid()+".jpg";
97. plus.zip.compressImage({
98. src: src,
99. dst: dstname,
100. overwrite:true,
101. quality: 20
102. },
103. function(event) {
104. //console.log("Compress success:"+event.target);
105. return event.target;
106. },
107. function(error) {
108. console.log(error);
109. return src;
110. //alert("Compress error!");
111. });
112. }
113. //旋转图片，本文没用到
114. function rotateImage() {
115. plus.zip.compressImage({
116. src: "_www/a.jpg",
117. dst: "_doc/a.jpg",
118. rotate: 90 // 旋转90度
119. },
120. function() {
121. alert("Compress success!");
122. },
123. function(error) {
124. alert("Compress error!");
125. });
126. }
127. function showActionSheet() {
128. var bts = [{
129. title: "拍照"
130. }, {
131. title: "从相册选择"
132. }];
133. plus.nativeUI.actionSheet({
134. cancel: "取消",
135. buttons: bts
136. },
137. function(e) {
138. if (e.index == 1) {
139. getImage();
140. } else if (e.index == 2) {
141. galleryImgs();
142. }
143. }
144. );
145. }
146. //拍照
147. function getImage() {
148. var cmr = plus.camera.getCamera();
149. cmr.captureImage(function(p) {
150. plus.io.resolveLocalFileSystemURL(p, function(entry) {
151. var localurl = entry.toLocalURL(); //
152. $(".dynamic_images ul li").remove(".pickimg");
153. $(".dynamic_images ul").prepend("<li class='pickimg'><img src='" + localurl + "' /></li>");
154. });
155. });
156. }

服务端asp.net版

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

速度非常快，测试过，如果不压缩速度没有明显的下降，但是考虑到显示时候加载的问题，还是进行了压缩