如题 ,
直接上单代码 ,
AC代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>APP</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<style>
#main {
padding: 5px;
}
.list {
100%;
display: flex;
flex-flow: row wrap;
}
.list-cell {
16.66666667%;
display: inline-block;
padding: 0 2px 4px 2px;
margin-right: 0px;
margin-bottom: -4px;
font-size: 17px;
text-align: center;
vertical-align: middle;
background: none;
}
.list-cell img {
100%;
max- 100%;
height: auto;
}
.tool {
100%;
text-align: center;
}
.tool-btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
background-color: #ecf0f1;
background-clip: padding-box;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid #ecf0f1;
60%;
color: #ffffff;
background-color: #1abc9c;
border: 1px solid #1abc9c;
}
.tool-btn:active {
color: #fff;
background-color: #16a085;
border: 1px solid #16a085;
}
</style>
</head>
<body>
<div id="wrap">
<div id="main">
<ul class="list" id="list">
<li class="list-cell">
<img src="../image/add_pic_bg0.png" id="uploadBtn" onclick="append();" tapmode="">
</li>
</ul>
<div class="tool">
<div style="padding:5px;"></div>
<div class="tool-btn" onclick="upload();" tapmode="">
上传图片
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
var SourceType = ['library', 'camera', 'album'];
apiready = function() {
api.parseTapmode();
};
//选择上传图片
function append() {
api.actionSheet({
cancelTitle : '取消',
buttons : ['从相册中选择', '使用相机拍摄']
}, function(ret, err) {
if (ret.buttonIndex != 3) {
var sourceType = "";
if (ret.buttonIndex == 1) {
sourceType = SourceType[0];
} else if (ret.buttonIndex == 2) {
sourceType = SourceType[1];
}
api.getPicture({
sourceType : sourceType,
encodingType : 'jpg',
mediaValue : 'pic',
destinationType : 'url',
allowEdit : true,
quality : 50,
saveToPhotoAlbum : false
}, function(ret, err) {
if (ret) {
if (ret.data) {
var btn = $api.byId('uploadBtn');
var pos = $api.offset(btn);
var html = "<div class="list-cell">";
html += "<img style="" + pos.w + "px;height:" + pos.h + "px;" src="" + ret.data + "" >";
html += "</div>";
$api.append($api.byId('list'), html);
}
} else {
console.log(JSON.stringify(err))
}
});
}
});
}
//上传图片
function upload() {
//获取当前列表的所有图片
var files = "{";
var imgs = $api.domAll(".list .list-cell img");
if (imgs.length > 1) {
//拼装成JSON字符串
for (var i = 1; i < imgs.length; i++) {
var src = $api.attr(imgs[i], "src");
files += ""file" + i + "":";
files += """ + src + "",";
}
files = files.substr(0, files.length - 1);
files += "}";
files = JSON.parse(files);
console.log(JSON.stringify(files));
api.showProgress({
title : '正在上传...',
text : '请稍等'
});
api.ajax({
url : "http://192.168.0.106:8081/Home/",
method : "post",
dataType : 'json',
contentType : "application/x-www-form-urlencoded; charset=utf-8",
returnAll : false,
cache : false,
timeout : 30,
data : {
files : files
}
}, function(ret, err) {
switch(ret.code) {
case "200":
api.alert({
msg : '上传成功 !'
});
break;
case "404":
api.toast({
msg : '上传的图片不能为空!'
});
break;
case "500":
api.toast({
msg : '上传失败 !'
});
break;
}
api.hideProgress();
console.log(JSON.stringify(ret));
console.log(JSON.stringify(err));
});
} else {
api.toast({
msg : '上传的图片不能为空!'
});
}
}
</script>
</html>
然后是.NET后台的代码 ,
后台是MVC写的 , 也可以用其他的方式写 ,
反正逻辑就是这么个情况了 ,
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace uploadServer.Controllers
{
[HandleError]
public class HomeController : Controller
{
public JsonResult Index()
{
result<string> ret = new result<string>();
List<string> fileName = new List<string>();
fileName.Add(" Count : " + Request.Files.Count);
ret.code = "404";
if (Request.Files.Count > 0)
{
string path = Server.MapPath("~/files/");
try
{
for (int i = 0; i < Request.Files.Count; i++)
{
string saveName = System.IO.Path.GetRandomFileName() + System.IO.Path.GetExtension(Request.Files[i].FileName);
Request.Files[i].SaveAs(path + saveName);
fileName.Add(path + saveName);
}
ret.code = "200";
}
catch
{
ret.code = "500";
}
}
ret.data = fileName;
return Json(ret, JsonRequestBehavior.AllowGet);
}
}
public class result<T>
{
public string code { get; set; }
public string des
{
get
{
return "200 : 上传成功 , 404 : 上传文件未找到 , 500 : 上传文件失败";
}
}
public List<T> data { get; set; }
}
}