base64 压缩上传上传图片

@{

    ViewBag.Title = "dddddddd";

    Layout = "~/Areas/Wap/Views/Shared/_Head.cshtml";

}

<html>

<head>

<title></title>

</head>

<body>

    <div data-role="page">

        <script type="text/javascript">

            var imgTypeArr = new Array();

            var imgArr = new Array();

            var isHand = 0;//1正在处理图片

            var nowImgType = "image/jpeg";

            var jic = {

                compress: function (source_img_obj, imgType) {

                    //alert("处理图片");

                    source_img_obj.onload = function () {

                        var cvs = document.createElement('canvas');

                        //naturalWidth真实图片的宽度

                        console.log("原图--" + this.width + ":" + this.height);

                        var scale = 1;

                        if (this.width > 200 || this.height > 200) {

                            if (this.width > this.height) {

                                scale = 200 / this.width;

                            } else {

                                scale = 200 / this.height;

                            }

                        }

                        cvs.width = this.width * scale;

                        cvs.height = this.height * scale;

                        var ctx = cvs.getContext("2d");

                        ctx.drawImage(this, 0, 0, cvs.width, cvs.height);

                        var newImageData = cvs.toDataURL(imgType, 0.8);

                        base64Img = newImageData;

                        imgArr.push(newImageData);

                        // $("#canvasDiv").append(cvs);

                        var img = new Image();

                        img.src = newImageData;

                        $(img).css('width', 100 + 'px');

                        $(img).css('height', 100 + 'px');

                        $("#canvasDiv").append(img);

                        isHand = 0;

                    }

                }

            }

            function handleFileSelect(evt) {

                isHand = 1;

                imgArr = [];

                imgTypeArr = [];

                $("#canvasDiv").html("");

                var files = evt.target.files;

                for (var i = 0, f; f = files[i]; i++) {

                    // Only process image files.

                    if (!f.type.match('image.*')) {

                        continue;

                    }

                    imgTypeArr.push(f.type);

                    nowImgType = f.type;

                    var reader = new FileReader();

                    // Read in the image file as a data URL.

                    reader.readAsDataURL(f);

                    // Closure to capture the file information.

                    reader.onload = (function (theFile) {

                        return function (e) {

                            var i = new Image();

                            i.src = e.target.result;

                            jic.compress(i, nowImgType);

                        };

                    })(f);

                }

            }

            $(function () {

                document.getElementById('fileToUpload').addEventListener('change', handleFileSelect, false);

            });

            function catUpload() {

                if (base64Img == "") {

                    show_msg("请选择图片！");

                    return;

                }

                if (isHand == 1) {

                    show_msg("请等待图片处理完毕！");

                    return;

                }

                $('.ui-loader').show();

                $.ajax({

                    type: "POST",

                    url: "/Upload/UploadImage1?path=new",

                    data: {

                        'img': imgArr,

                        'type': imgTypeArr

                    },

                    success: function (data) {

                        //$('.ui-loader').hide();

                        //show_msg(data.info);

                        alert(data.path)

                    }

                });

            }

            //消息提示

            function show_msg(msg) {

                //消息显示时间

                var time = arguments[1] ? arguments[1] : 1500;

                $('#info_pop p').text(msg);

                $("#info_pop").popup("open");

                setTimeout('$("#info_pop").popup("close");', time);

            }

        </script>

        <div data-role="content">

            <table style="width: 100%;">

                <tr>

                    <td>

                        <input id="fileToUpload" type="file" name="fileToUpload" accept="image/*" multiple="multiple">

                    </td>

                    <td width="80" align="right">

                        <button class="ui-btn ui-icon-add ui-corner-all" onclick="catUpload();">压缩上传</button>

                    </td>

                </tr>

            </table>

            <div id="canvasDiv">

            </div>

        </div><!-- endContent  -->

        <div data-role="popup" id="info_pop" class="ui-content" data-theme="d" style='font-weight:bold;font-size:14px; z-index: 999; background-color: white;'>

            <p>未知错误</p>

        </div>

    </div>

    </body>

</html>

public ActionResult UploadImage1()

        {

            string path = string.Empty;

            string path_s = string.Empty;

            string type = string.Empty;

            string strs = Request["img[]"];//接收文件

            byte[] arr = Convert.FromBase64String(strs.Split(',')[]);

            MemoryStream ms = new MemoryStream(arr);

            string filename =Guid.NewGuid().ToString("N")+ ".jpg";

            string fileext = Path.GetExtension(filename);

            if (!Directory.Exists(Server.MapPath("/ImageFiles/")))

            {

                Directory.CreateDirectory(Server.MapPath("/ImageFiles/"));

            }

            string dircstr = "/ImageFiles/" + Request["path"] + "/";

            if (!Directory.Exists(Server.MapPath(dircstr)))

            {

                Directory.CreateDirectory(Path.GetDirectoryName(Server.MapPath(dircstr)));

            }

            string fileloadname = dircstr + DateTime.Now.Year.ToString() + DateTime.Now.Month.ToString() + DateTime.Now.Day.ToString() + DateTime.Now.Hour.ToString() + DateTime.Now.Minute.ToString() + DateTime.Now.Second.ToString() + filename;

            StreamWriter sw = new StreamWriter(Server.MapPath( fileloadname));

            ms.CopyTo(sw.BaseStream);

            sw.Flush();

            sw.Close();

            ms.Close();

            path += fileloadname ;

            return Content(JsonConvert.SerializeObject(new { success = true, path = path }), APPJSON);

        }

base64 压缩上传上传图片的更多相关文章

Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式
前言最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...
vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...
js 图片压缩上传（base64位）以及上传类型分类
一.input file上传类型 1.指明只需要图片 <input type="file" accept='image/*'> 2.指明需要多张图片 <input ...
移动端H5上传图片并压缩上传
手头上的这个项目主要是在微信内运行的一个网站,需要用户上传手机内的照片,而现在手机照片尺寸越来越大,直接上传的话的确上传进度慢影响用户体验而且也会给服务器增加压力,所以利用H5的新特性压缩后上传不失为 ...
HTML5 图片本地压缩上传插件「localResizeIMG」
移动应用中用户往往需要上传照片,但是用户上传的照片尺寸通常很大,而手机的流量却很有限,所以在上传前对图像进行压缩是很有必要的. 原生应用可以直接对文件进行处理,网页应用就没有这个优势了.不过 canv ...
纯原生js移动端图片压缩上传插件
前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...
基于vue + axios + lrz.js 微信端图片压缩上传
业务场景微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...
JS—图片压缩上传（单张）
*vue+webpack环境,这里的that指到vue实例 <input type="file" name="file" accept="ima ...
三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)
涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为 ...

随机推荐

从swap说引用
C++的引用类型是个很奇妙的存在,比如下面这个例子: #include<iostream> using namespace std; void swap(int& a, int&a ...
Linux获取so/ko文件版本号教程
一.需要获取版本号的原因从使用角度而言,有时只有特定版本的库才支持某些功能,所以我们需要确定库文件版本号. 从安全加固角度而言,有些版本存在漏洞有些版本不存在漏洞,所以我们需要获取版本号以确定当前使 ...
hadoop之安装
在Linux环境下安装Hadoop: 一.安装环境硬件:虚拟机操作系统:Centos 6.4 64位 IP:192.168.153.130主机名:imooc安装用户:root ...
1分钟看懂log4j 配置自己想要的日志信息
在开发的时候我们会希望只将 sql信息的日志,已经自定义输出的日志进行打印 ,而一些框架级的日志不需要输出如下首先 rootLogger 设置日志级别 log4j.rootLogg ...
API的控制器
// GET: api/showApi /// <summary> /// 显示查询 /// </summary> /// <param name="name ...
SEH X86
( windows 提供的异常处理机制实际上只是一个简单的框架,一般情况下开发人员都不会直接用到.我们通常所用的异常处理(比如 C++ 的 throw.try.catch)都是编译器在系统提供的异常处 ...
oracle 修改进程
SQL> show parameter session NAME TYPE VALUE------------------------------------ ----------- ----- ...
第一次学习手游开发:Flappy Bird制作
周末有空,学习下手游开发,因为本人压根没有基础,于是找了个视频,跟着教程撸了个Flappy Bird. 感谢 SwiftV课堂提供的教学视频源码地址: https://github.com/phe ...
在linux系统安装tomcat后，bin文件下startup.sh启动不
Linux里的tomcat下的 bin ,没法执行, 可直接到 bin 目录下 ,执行 chmod 777 * 就可以了. [srmdev@mvxl0793 bin]$ chmod 777 * ...
Ajax之Json对象序列化传参
前端部分:传入参数 "groupObject" : jsonString //对象序列化传参 var projectGroup = {}; projectGroup["i ...

base64 压缩上传上传图片

base64 压缩上传上传图片的更多相关文章

随机推荐

热门专题