apicloud apicloud

注册
查看: 6740|回复: 23

[APP开发技巧] .NET下 , 上传图片的处理方式 , 贴上代码 .

主题:
13
帖子:
679
云币:
1141

中秋节APICloud粉丝圣诞节女朋友装逼侠单身狗

[APP开发技巧] .NET下 , 上传图片的处理方式 , 贴上代码 .

6740 23 | 发表于 2015-7-18 02:54:23 |阅读模式 | |
本帖最后由 宁缺毋滥y丶 于 2015-7-18 02:55 编辑

如题 ,

直接上单代码 ,

AC代码 ,
  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6.         <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7.         <title>APP</title>
  8.         <link rel="stylesheet" type="text/css" href="../css/api.css" />
  9.         <link rel="stylesheet" type="text/css" href="../css/common.css" />
  10.         <style>
  11.             #main {
  12.                 padding: 5px;
  13.             }
  14.             .list {
  15.                 width: 100%;
  16.                 display: flex;
  17.                 flex-flow: row wrap;
  18.             }
  19.             .list-cell {
  20.                 width: 16.66666667%;
  21.                 display: inline-block;
  22.                 padding: 0 2px 4px 2px;
  23.                 margin-right: 0px;
  24.                 margin-bottom: -4px;
  25.                 font-size: 17px;
  26.                 text-align: center;
  27.                 vertical-align: middle;
  28.                 background: none;
  29.             }
  30.             .list-cell img {
  31.                 width: 100%;
  32.                 max-width: 100%;
  33.                 height: auto;
  34.             }
  35.             .tool {
  36.                 width: 100%;
  37.                 text-align: center;
  38.             }
  39.             .tool-btn {
  40.                 display: inline-block;
  41.                 padding: 6px 12px;
  42.                 margin-bottom: 0;
  43.                 font-size: 14px;
  44.                 font-weight: normal;
  45.                 line-height: 1.42857143;
  46.                 text-align: center;
  47.                 background-color: #ecf0f1;
  48.                 background-clip: padding-box;
  49.                 white-space: nowrap;
  50.                 vertical-align: middle;
  51.                 -ms-touch-action: manipulation;
  52.                 touch-action: manipulation;
  53.                 cursor: pointer;
  54.                 -webkit-user-select: none;
  55.                 -moz-user-select: none;
  56.                 -ms-user-select: none;
  57.                 user-select: none;
  58.                 background-image: none;
  59.                 border: 1px solid #ecf0f1;
  60.                 width: 60%;
  61.                 color: #ffffff;
  62.                 background-color: #1abc9c;
  63.                 border: 1px solid #1abc9c;
  64.             }
  65.             .tool-btn:active {
  66.                 color: #fff;
  67.                 background-color: #16a085;
  68.                 border: 1px solid #16a085;
  69.             }
  70.         </style>
  71.     </head>
  72.     <body>
  73.         <div id="wrap">
  74.             <div id="main">
  75.                 <ul class="list" id="list">
  76.                     <li class="list-cell">
  77.                         <img src="../image/add_pic_bg0.png" id="uploadBtn" onclick="append();" tapmode="">
  78.                     </li>
  79.                 </ul>
  80.                 <div class="tool">
  81.                     <div style="padding:5px;"></div>
  82.                     <div class="tool-btn" onclick="upload();" tapmode="">
  83.                         上传图片
  84.                     </div>
  85.                 </div>
  86.             </div>
  87.         </div>
  88.     </body>
  89.     <script type="text/javascript" src="../script/api.js"></script>
  90.     <script type="text/javascript">
  91.         var SourceType = ['library', 'camera', 'album'];
  92.         apiready = function() {
  93.             api.parseTapmode();
  94.         };
  95.         //选择上传图片
  96.         function append() {
  97.             api.actionSheet({
  98.                 cancelTitle : '取消',
  99.                 buttons : ['从相册中选择', '使用相机拍摄']
  100.             }, function(ret, err) {
  101.                 if (ret.buttonIndex != 3) {
  102.                     var sourceType = "";
  103.                     if (ret.buttonIndex == 1) {
  104.                         sourceType = SourceType[0];
  105.                     } else if (ret.buttonIndex == 2) {
  106.                         sourceType = SourceType[1];
  107.                     }
  108.                     api.getPicture({
  109.                         sourceType : sourceType,
  110.                         encodingType : 'jpg',
  111.                         mediaValue : 'pic',
  112.                         destinationType : 'url',
  113.                         allowEdit : true,
  114.                         quality : 50,
  115.                         saveToPhotoAlbum : false
  116.                     }, function(ret, err) {
  117.                         if (ret) {
  118.                             if (ret.data) {
  119.                                 var btn = $api.byId('uploadBtn');
  120.                                 var pos = $api.offset(btn);
  121.                                 var html = "<div class=\"list-cell\">";
  122.                                 html += "<img style=\"width:" + pos.w + "px;height:" + pos.h + "px;\" src=\"" + ret.data + "\" >";
  123.                                 html += "</div>";
  124.                                 $api.append($api.byId('list'), html);
  125.                             }
  126.                         } else {
  127.                             console.log(JSON.stringify(err))
  128.                         }
  129.                     });
  130.                 }
  131.             });
  132.         }

  133.         //上传图片
  134.         function upload() {
  135.             //获取当前列表的所有图片
  136.             var files = "{";
  137.             var imgs = $api.domAll(".list .list-cell img");
  138.             if (imgs.length > 1) {
  139.                 //拼装成JSON字符串
  140.                 for (var i = 1; i < imgs.length; i++) {
  141.                     var src = $api.attr(imgs[i], "src");
  142.                     files += "\"file" + i + "\":";
  143.                     files += "\"" + src + "\",";
  144.                 }
  145.                 files = files.substr(0, files.length - 1);
  146.                 files += "}";
  147.                 files = JSON.parse(files);
  148.                 console.log(JSON.stringify(files));
  149.                 api.showProgress({
  150.                     title : '正在上传...',
  151.                     text : '请稍等'
  152.                 });
  153.                 api.ajax({
  154.                     url : "http://192.168.0.106:8081/Home/",
  155.                     method : "post",
  156.                     dataType : 'json',
  157.                     contentType : "application/x-www-form-urlencoded; charset=utf-8",
  158.                     returnAll : false,
  159.                     cache : false,
  160.                     timeout : 30,
  161.                     data : {
  162.                         files : files
  163.                     }
  164.                 }, function(ret, err) {
  165.                     switch(ret.code) {
  166.                         case "200":
  167.                             api.alert({
  168.                                 msg : '上传成功 !'
  169.                             });
  170.                             break;
  171.                         case "404":
  172.                             api.toast({
  173.                                 msg : '上传的图片不能为空!'
  174.                             });
  175.                             break;
  176.                         case "500":
  177.                             api.toast({
  178.                                 msg : '上传失败 !'
  179.                             });
  180.                             break;
  181.                     }
  182.                     api.hideProgress();
  183.                     console.log(JSON.stringify(ret));
  184.                     console.log(JSON.stringify(err));
  185.                 });
  186.             } else {
  187.                 api.toast({
  188.                     msg : '上传的图片不能为空!'
  189.                 });
  190.             }
  191.         }
  192.     </script>
  193. </html>
复制代码


然后是.NET后台的代码 ,

后台是MVC写的 , 也可以用其他的方式写 ,

反正逻辑就是这么个情况了 ,

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;

  6. namespace uploadServer.Controllers
  7. {
  8.     [HandleError]
  9.     public class HomeController : Controller
  10.     {
  11.         public JsonResult Index()
  12.         {
  13.             result<string> ret = new result<string>();
  14.             List<string> fileName = new List<string>();
  15.             fileName.Add(" Count : " + Request.Files.Count);
  16.             ret.code = "404";
  17.             if (Request.Files.Count > 0)
  18.             {
  19.                 string path = Server.MapPath("~/files/");
  20.                 try
  21.                 {
  22.                     for (int i = 0; i < Request.Files.Count; i++)
  23.                     {
  24.                         string saveName = System.IO.Path.GetRandomFileName() + System.IO.Path.GetExtension(Request.Files[i].FileName);
  25.                         Request.Files[i].SaveAs(path + saveName);
  26.                         fileName.Add(path + saveName);
  27.                     }
  28.                     ret.code = "200";
  29.                 }
  30.                 catch
  31.                 {
  32.                     ret.code = "500";
  33.                 }
  34.             }
  35.             ret.data = fileName;
  36.             return Json(ret, JsonRequestBehavior.AllowGet);
  37.         }
  38.     }

  39.     public class result<T>
  40.     {
  41.         public string code { get; set; }
  42.         public string des
  43.         {
  44.             get
  45.             {
  46.                 return "200 : 上传成功 , 404 : 上传文件未找到 , 500 : 上传文件失败";
  47.             }
  48.         }
  49.         public List<T> data { get; set; }
  50.     }
  51. }
复制代码



贴上AC的全部代码 ,

有需要的同学可以下载看看 ,






本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

2

查看全部评分

主题:
9
帖子:
197
云币:
1825

APICloud粉丝一周年

发表于 2015-7-18 10:16:46 |
赞一个!!

主题:
5
帖子:
13939
云币:
14443
发表于 2015-7-18 12:39:06 |

主题:
0
帖子:
25
云币:
2413
发表于 2015-8-8 11:22:32 |
谢谢分享

业余车手

UID:22235

主题:
89
帖子:
1166
云币:
10259

版主勋章APICloud粉丝端午节

发表于 2015-8-9 09:01:21 |
赞一个,顶起

主题:
7
帖子:
1577
云币:
1578
发表于 2015-8-10 10:16:37 |
webform的方式还有点区别
30分钟内迅速响应,一对一技术支持,每个问题均能获得专业解答----优先技术支持

主题:
13
帖子:
679
云币:
1141

中秋节APICloud粉丝圣诞节女朋友装逼侠单身狗

 楼主| 发表于 2015-8-10 19:40:54 |
数据云咨询-北 发表于 2015-8-10 10:16
webform的方式还有点区别



这个倒是真的 ,

所以我做MVC的 , 感觉MVC的简单些 ,

主题:
7
帖子:
1577
云币:
1578
发表于 2015-8-10 19:54:06 |
宁缺毋滥y丶 发表于 2015-8-10 19:40
这个倒是真的 ,

所以我做MVC的 , 感觉MVC的简单些 ,

补全一下,只是有一些区别而已
30分钟内迅速响应,一对一技术支持,每个问题均能获得专业解答----优先技术支持

主题:
13
帖子:
679
云币:
1141

中秋节APICloud粉丝圣诞节女朋友装逼侠单身狗

 楼主| 发表于 2015-8-13 03:38:23 |
数据云咨询-北 发表于 2015-8-10 19:54
补全一下,只是有一些区别而已



MVC的处理方式 ,

比一般的webfrom , 要简单的多 ,

用那个做 ,我半天没弄出来,  就用的MVC

主题:
7
帖子:
1577
云币:
1578
发表于 2015-8-13 11:48:00 |
aspx的方式,这样获取文件即可,处理相同

System.Web.HttpFileCollection _file = System.Web.HttpContext.Current.Request.Files;
30分钟内迅速响应,一对一技术支持,每个问题均能获得专业解答----优先技术支持
123下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表