使用localResizeIMG3+WebAPI实现手机端图片上传
使用localResizeIMG3+WebAPI实现手机端图片上传
前言
惯例~惯例~昨天发表的使用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 = 1; i < 4; i++)
{
string img = "img" + i;
if (imgJObject.Value<JObject>(img).Value<int>("size") > 0)
{
//获取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实现手机端图片上传的全部功能~
我这里是多图上传所以定义了数组,大家可以根据需求对数据进行处理~