[技术分享] .NET下 , 上传图片的处理方式 , 贴上代码 .
如题 ,
直接上单代码 ,
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 {
width: 100%;
display: flex;
flex-flow: row wrap;
}
.list-cell {
width: 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 {
width: 100%;
max-width: 100%;
height: auto;
}
.tool {
width: 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;
width: 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=\"width:" + 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; }
}
}
[技术分享] .NET下 , 上传图片的处理方式 , 贴上代码 .的更多相关文章
- 技术分享 | ARM下中标麒麟系统ky10使用Xtrabackup-8.0.25
欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 一.需求背景 查询Percona官方手册,Xtrabackup 8.0可以备份M ...
- UWA 技术分享连载 转载
技术分享连载1 Q1:Texture占用内存总是双倍,这个是我们自己的问题,还是Unity引擎的机制? Q2:我现在发现两个因素直接影响Overhead,一个是Shader的复杂度,一个是空Updat ...
- 2018年1月20日上海MVP线下技术分享会纪实
1月20日正值大寒节气,在微软MVP朱兴亮的组织牵头下,上海MVP自发举办了题为<跟社区专家一起聊聊混合云.领域驱动.区块链和数字营销>的技术交流会.四名来自上海的MVP分别在自己擅长的技 ...
- 技术分享 | 在MySQL对于批量更新操作的一种优化方式
欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 作者:景云丽.卢浩.宋源栋 GreatSQL社区原创内容未经授权不得随意使用,转 ...
- 【转发】网易邮箱前端技术分享之javascript编码规范
网易邮箱前端技术分享之javascript编码规范 发布日期:2013-11-26 10:06 来源:网易邮箱前端技术中心 作者:网易邮箱 点击:533 网易邮箱是国内最早使用ajax技术的邮箱.早在 ...
- 恒天云技术分享系列5 – 虚拟化平台性能对比（KVM & VMware）
恒天云技术分享系列:http://www.hengtianyun.com/download-show-id-14.html 概述 本性能测试报告将详细陈述各虚拟化平台基准性能测试的主要结论和详细结果. ...
- iOS开发技术分享（1）— iOS本地数据存储
iOS开发技术分享(1)— iOS本地数据存储 前言: 我本是一名asp.net程序员,后来加入了iOS游戏开发队伍,到现在也有一年多的时间了.这一年来,每天都干到2.3点钟才睡觉,不为别的,只为了学 ...
- UWP 手绘视频创作工具技术分享系列 - SVG 的解析和绘制
本篇作为技术分享系列的第一篇,详细讲一下 SVG 的解析和绘制,这部分功能的研究和最终实现由团队的 @黄超超 同学负责,感谢提供技术文档和支持. 首先我们来看一下 SVG 的文件结构和组成 SVG ( ...
- UWP 手绘视频创作工具技术分享系列
开篇先来说一下写这篇文章的初衷. 初到来画,通读了来画 UWP App 的代码,发现里面确实有很多比较高深的技术点,同时也是有很多问题的,扩展性,耦合,性能,功能等等.于是我们决定从头重构这个产品,做 ...
随机推荐
- 通过hibernate session.connection()获得数据库连接时,导致的查询缓慢甚至假死机问题
在使用hibernate的应用中,如果需要直接使用Java.sql.Connection,一般我们是通过hibernate的session.connection()获得的,然后session.clos ...
- ZeroclipboardJS+flash实现将内容复制到剪贴板实例
Zeroclipboard 的实现原理 Zeroclipboard 利用 Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash.但最新的 Flash ...
- [LintCode] Longest Increasing Continuous Subsequence 最长连续递增子序列
Give an integer array,find the longest increasing continuous subsequence in this array. An increasin ...
- TFS任务更新
由于不熟悉TFS任务更新的操作,花了四五个小时一个个的新建任务.下图是部分更新的任务截图: 每个任务的估计时间为3~5小时,每位成员的任务总时长均为19~20小时. 项目完成需要的总时间为135小时.
- JCreator的配置
1.在Configure(配置)菜单上选择Options(选项),将弹出对话框. 2.在Option对话框中选择左侧JDK Profile,选择右侧JDK version 1.x.x.. ,点击Edi ...
- centos6 搭建ELK
mark一下时间:2016年2月19日10:17:09 记录使用 Logstash: Logstash服务的组件,用于处理传入的日志. Elasticsearch: 存储所有日志 Kibana 4: ...
- HTTP Error 403没有了，但是中文全都是乱码。又是怎么回事？
首先是简单的网页抓取程序: [python] import sys, urllib2req = urllib2.Request("http://blog.csdn.net/nevasun&q ...
- Web前端开发基础 第二天（各类标签）
认识标签(第二部分): <ul> <li>信息</li> <li>信息</li> ...... </ul> <ol> ...
- Linux LVM过程问题
问题: 使用fdisk 修改完成磁盘后,在/etc/下没有出现新建的分区文件 解决: 重启系统 (好吧,这他妈也算解决方案~~)
- HDU 1160 FatMouse's Speed（要记录路径的二维LIS）
FatMouse's Speed Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...