[技术分享] .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 的代码,发现里面确实有很多比较高深的技术点,同时也是有很多问题的,扩展性,耦合,性能,功能等等.于是我们决定从头重构这个产品,做 ...
随机推荐
- Jquery_jquery中attr和prop的区别
在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: ...
- javamail 收邮件并解析附件
package com.zz.mail; import java.io.*; import java.text.*; import java.util.*; import javax.mail.*; ...
- jquery js javascript select 无限级 插件 优化foxidea版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Android常用功能代码块
1.设置activity无标题,全屏 // 设置为无标题栏 requestWindowFeature(Window.FEATURE_NO_TITLE); // 设置为全屏模式 getWindow(). ...
- CG资源网 - Maya教程
Maya中mentalray灯光渲染终极训练视频教程 http://www.cgtsj.com/cg/f/vx3627/index.html Maya无人机建模制作训练视频教程第一季 http://w ...
- QWeb、Widget继承
对于Odoo前端来说,所有的js对象都是继承自openerp.web.Class这个类,然后由此派生出Widget,由Widget派生出其他诸如View等可视化部件,结合QWeb,我们可以实现对现有部 ...
- Address already in use:JVM_Bind
1.原因:端口被占用 2.解决方式: 方式一:重启电脑 方式二:方式一不行执行方式二 双击Tomcat server 将Ports下HTTP/1.1对应的Port Number 改为其他值 备注: ...
- zk listbox 点击列标题实现排序功能
前台(test.zul): <?page title="测试" contentType="text/html;charset=UTF-8"?> &l ...
- struts2--convention-plugin--零配置
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "- ...
- what's the difference between dim as and dim as new?
what's the difference between dim as and dim as new? There is no difference with value types (Intege ...