使用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实现手机端图片上传的全部功能~

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大内老A

只在UnitTest和WebHost中的出现的关于LogicalCallContext的严重问题

最近一直在进行公司内部框架的升级工作,其中一个小的部分就是通过HttpSessionState和CallContext建立一套统一的、可扩展的用于管理上下文信息...

1778
来自专栏酷玩时刻

前端后台以及游戏中使用google-protobuf详解

protoBuf是一种灵活高效的独立于语言平台的结构化数据表示方法,与XML相比,protoBuf更小更快更简单。你可以用定义自己protoBuf的数据结构,用...

1092
来自专栏技术小讲堂

ASP.NET Web API中的依赖注入什么是依赖注入ASP.NET Web API依赖解析器使用Unity解析依赖配置依赖解析

什么是依赖注入     依赖,就是一个对象需要的另一个对象,比如说,这是我们通常定义的一个用来处理数据访问的存储,让我们用一个例子来解释,首先,定义一个领域模型...

3388
来自专栏木宛城主

SharePoint中在线编辑文档

我一直以为只有在Document Library里面的File才会支持在线编辑。直到今天早上我才发现用IE打开List里面的Attachments也是支持在线...

1836
来自专栏菩提树下的杨过

JAVA CDI 学习(3) - @Produces及@Disposes

上一节学习了注入Bean的生命周期,今天再来看看另一个话题: Bean的生产(@Produces)及销毁(@Disposes),这有点象设计模式中的工厂模式。在...

1885
来自专栏晓晨的专栏

.NET Core 实现定时抓取博客园首页文章信息并发送到邮箱

大家好,我是晓晨。许久没有更新博客了,今天给大家带来一篇干货型文章,一个每隔5分钟抓取博客园首页文章信息并在第二天的上午9点发送到你的邮箱的小工具。比如我在20...

2458
来自专栏企鹅号快讯

Spring Boot 2.0-WebFlux framework

1、介绍 1.1 什么是响应式编程(Reactive Programming)? 简单来说,响应式编程是针对异步和事件驱动的非阻塞应用程序,并且需要少量线程来垂...

3695
来自专栏iOS122-移动混合开发研究院

PureLayout,使用纯代码写AutoLayout

? ? ? ? ? ? 为iOS和OS X的自动布局最终的API -- 令人印象深刻的简单,非常强大。 PureLayout延伸的UIView /NSView...

2377
来自专栏ASP.NET MVC5 后台权限管理系统

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(14)-EasyUI缺陷修复与扩展

不知不觉已经过了13讲,(本来还要讲多一讲是,数据验证之自定义验证,基于园友还是对权限这块比较敢兴趣,讲不讲验证还是看大家的反映),我们应该对系统有一个小结。 ...

1736
来自专栏深度学习之tensorflow实战篇

CRT /Linux基本设置的语言颜色问题设置

 远程连接unix系统的工具,以前用的最多的就是SSH了,不过SSH有一个硬伤,不能设置客户端编码,有时候看中文很容易乱码,而且不能分组记录多服务器地址。put...

37410

扫码关注云+社区