前言

惯例~惯例~昨天发表的使用OWIN作为WebAPI的宿主..嗯..有很多人问..是不是缺少了什么 - - 好吧,如果你要把OWIN寄宿在其他的地方...代码如下:

namespace ConsoleTest
{
class Program
{
static void Main(string[] args)
{
string baseAddress = "http://localhost:9000/"; // 管道地址
//开启管道监听
WebApp.Start<Startup>(url: baseAddress);
Console.WriteLine("开启成功!");
// Create HttpCient and make a request to api/values
////创建HTTP客户
//HttpClient client = new HttpClient();
//var response = client.GetAsync(baseAddress + "api/values").Result;
//Console.WriteLine(response);
//Console.WriteLine(response.Content.ReadAsStringAsync().Result); Console.ReadLine();
}
}
}

闲话不多说~让我们开始今天的内容,!

写过上传图片的都知道,在HTML5没出来以前,我们做上传图片预览,必须要先上传到服务器,然后在由服务器来反馈给客户端预览,这样..既不科学也会占用大量的服务器资源.

在BS迅速发展的今天,是时候来改变了..(咳咳,装下B..)

今天我们主要的内容是使用HTML5实现本地预览图片,然后在使用localResizeIMG3+AJAX的形式把图片传到我们昨天的WebAPI~然后存在服务器.

介绍一下localResizeIMG3 嗯..这是一个开源框架..主要目的是:没有蛀牙!!(咳咳,串戏了..),呃,是通过JS把图片压缩(可设置压缩率)成base64字符串 使其可以通过AJAX参数的形式直接上传.

localResizeIMG3 的开源地址:https://github.com/think2011/localResizeIMG3/releases

AJAX..WebAPI..需要我多说么? - -,

下面我们来看实现效果:

说明:我这里的压缩率设置为0.1..你们懂的..(好吧,不懂的话..其实就是我也说了手机端嘛,节省流量,~图片质量还行吧..)

正文开始

首先我们来看看WebAPI的实现代码~我的风格..你们懂的..不解释太多,都在注释里了..

  [HttpPost]
public List<string> DoSaveImages([FromBody]JObject imgJObject)
{
List<string> list = new List<string>();
for (int i = ; i < ; i++)
{
string img = "img" + i;
if (imgJObject.Value<JObject>(img).Value<int>("size") > )
{
//获取base64位数据流
var base64 = imgJObject.Value<JObject>(img).Value<string>("base64");
Regex reg = new Regex("data:image/(.*);base64,");
//正则替换
base64 = reg.Replace(base64, "");
//转换为byte数组
byte[] arr = Convert.FromBase64String(base64);
//转换为内存流
var ms = new MemoryStream(arr);
//转换为bitmap图片对象
var bmp = new Bitmap(ms);
//生成图片名称
string dizhi = DateTime.Now.ToString("yyyyMMddHHmmssffff");
var path = GetMapPath("~/Upimages/") + dizhi + ".jpg";
//存入服务器
bmp.Save(path);
string website = "http://" + HttpContext.Current.Request.Url.Authority;
list.Add(website + "/Upimages/" + dizhi + ".jpg"); }
}
return list; }

下面我们来看看前端JS的代码~(重点~)

首先我们来看看HTML5直接客户端预览图片的代码:

 // 选择图片,读取地址预览的辅助函数
//采用HTML5 FileReader接口 兼容IE9以上..
function readURL(input, tmpimg) { if (input.files && input.files[0]) {
var reader = new FileReader();
//注册onload事件
reader.onload = function (e) {
if (!/image/.test(e.target.result)) {
alert('请上传图片格式...');
return false;
}
tmpimg.attr('src', e.target.result);
}
//读取文件成为二进制流
reader.readAsDataURL(input.files[0]);
}
}

好了,下面我们来看看关键的 上传图片的代码:

  //定义多图存储数组
var img_data = { img1: {
base64: "",
size: 0
},
img2: {
base64: "",
size: 0
},
img3: {
base64: "",
size: 0
}
}
$(function () {
$(".choseimg input").change(function () {
var $me = $(this);
var index = $(this).attr("img");
var $img = $me.parent().find('img');
readURL(this, $img);
//使用LEZ转换图片
lrz(this.files[0], {
quality: 0.1, //设置压缩率
done: function (results) {
img_data[index].base64 = results.base64;
img_data[index].size = results.base64Len; }
});
});
})
//确定上传
function Submit() {
$.ajax({
cache: true,
type: "POST",
url: 'api/Values/DoSaveImages',
data: JSON.stringify(img_data)
,
contentType: 'application/json',
async: true,
error: function (request) {
alert("出现异常,请联系客服");
},
success: function (data) {
for (var i = 0; i < data.length; i++) {
$("#upimage").append(' <img src="' + data[i] + '" />');
}
}
});
}

这样,我们就完成使用localResizeIMG3+WebAPI实现手机端图片上传的全部功能~

我这里是多图上传所以定义了数组,大家可以根据需求对数据进行处理~

使用localResizeIMG3+WebAPI实现手机端图片上传的更多相关文章

  1. HTML5手机端拍照上传

    1.accept="image/*" capture="camera" 自动调用手机端拍照功能 accept="image/*" captu ...

  2. megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题

    最近在弄微信端的公众号.订阅号的相关功能,发现原本网页上用的uploadify图片上传功能到手机端有的手机类型上就不能用了,比如iphone,至于为啥我想应该不用多说了吧(uploadify使用fla ...

  3. 手机端 H5上传头像

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. 手机端图像编辑上传-cropper

    编辑头像,实现相册,照像功能,并能缩放裁剪功能,可自定义UI,引用'cropper.js', 'exif.js' /*初始化裁剪插件*/ var screenWidth = $(window).wid ...

  5. aps.net mvc webapi 实现文件或图片上传

    前几天看到网上有很多复杂的实现方式,觉得没必要,所以就写个简单的实现. 一:首先来看看Api Controller里面的代码: HttpContext.Current.Request.Files  这 ...

  6. 关于移动手机端富文本编辑器qeditor图片上传改造

    日前项目需要在移动端增加富文本编辑,上网找了下,大多数都是针对pc版的,不太兼容手机,当然由于手机屏幕小等原因也限制富文本编辑器的众多强大功能,所以要找的编辑器功能必须是精简的. 找了好久,发现qed ...

  7. MVC 手机端页面 使用标签file 图片上传到后台处理

    最近刚做了一个头像上传的功能,使用的是H5 的界面,为了这个功能搞了半天的时间,找了各种插件,有很多自己都不知道怎么使用,后来只是使用了一个标签就搞定了:如果对样式没有太大的要求我感觉使用这个就足够了 ...

  8. IOS5开发-http get/post调用mvc4 webapi互操作(图片上传)[转]

    IOS5开发-http get/post调用mvc4 webapi互操作(图片上传)   目前最流行的跨平台交互是采用http协议通过JSON对象进行互操作.这种方式最简单,也很高效.webservi ...

  9. kindeditor修改图片上传路径-使用webapi上传图片到图片服务器

    kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 在这里我着重介绍一些使用kindeditor修改图片上传路径并通过webapi上传图片到图片服务器的方案. 因为我使用的 ...

随机推荐

  1. 你真的了解DOM事件么?

    你真的了解DOM事件么? 我们大家都知道,人与人之间的交流可以通过语言,文字,肢体动作,面部微表情等,但是你知道Javascript和HTML之间是通过什么进行交互的么?你又知道Javascript和 ...

  2. EF6 CodeFirst+Repository+Ninject+MVC4+EasyUI实践(九)

    前言 这一篇我们将完成系统的权限设置功能以及不同角色用户登录系统后动态加载菜单.注意:此示例权限只针对菜单级,如果园友需要更复杂的系统权限设置,可以拓展到按钮级或属性级. 用户的登录采用Form认证来 ...

  3. IIS7中的站点、应用程序和虚拟目录详细介绍 (转)

    这里说的不是如何解决路径重写或者如何配置的问题,而是阐述一下站点(site),应用程序(application)和虚拟目录 (virtual directory)概念与作用,已及这三个东西在IIS6与 ...

  4. 教你一步一步实现一个Promise

    Promise我想现在大家都非常熟悉了,主要作用就是解决异步回调问题,这里简单介绍下. Promise规范是CommonJS规范之一,而Promise规范又分了好多种,比如 Promises/A.Pr ...

  5. Substance风格实例大全javaswing皮肤风格大全(原)

    转载请注明来路:http://www.cnblogs.com/langtianya/ 下图是所支持的设置 下面把上面的每一个选项的子选项进行试验 substance皮肤: AutumnSkin Bus ...

  6. GDB: advanced usages

    Sometimes running program in Unix will fail without any debugging info or warnings because of the la ...

  7. 【js】函数问题

    一.函数重载问题: 由于js的函数传入的参数当做arguments对象(和数组类似,但不是Array的实例),传入的参数类型和数量没有限制,没有函数签名,所以如果要实现重载功能 的话,只能是不够完美得 ...

  8. python 关于文件夹的操作

    在python中,文件夹的操作主要是利用os模块来实现的, 其中关于文件夹的方法为:os.lister() , os.path.join() , os.path.isdir() #  path 表示文 ...

  9. NetBeans IDE 多行标签设置方法

  10. redis-java基础操作

    安装 windows版的Redis,打开即可,默认端口6379 导入两个jar包  commons-pool2-2.3.jar   jedis-2.7.0.jar 一 写配置文件 redis.setM ...