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

时间：2023-03-09 17:35:45
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. }

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