js

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>js上传图片</title>

</head>

<body>

    <input id="file" type="file">

    <script type="text/javascript">

        window.onload = function myfunction() {

            var input = document.getElementById('file');

            input.onchange = function () {

                var files = this.files;

                for (var i = 0, len = files.length; i < len; i++) {

                    var file = files[i];

                    //file.name || file.fileName  => 文件名称

                    //file.size || file.fileSize  => 文件大小

                    upload_html5(file);

                }

            };

        }

        function upload_html5(file) {

            //html5 上传

            var xhr = new XMLHttpRequest();

            //上传进度事件

            xhr.upload.addEventListener("progress", function (e) { }, false);

            //上传完成（成功）事件

            xhr.addEventListener("load", function (e) {

                //获取服务器响应

                var obj = JSON.parse(e.target.responseText);

                if (obj.code == 200) {

                    alert("上传成功");

                }

                else {

                    alert(obj.message);

                }

            }, false);

            //上传失败事件

            xhr.addEventListener("error", function (e) {

                console.log(e);

                alert("上传失败");

            }, false);

            //上传中断（取消）事件

            xhr.addEventListener("abort", function (e) {

                alert("上传取消");

            }, false);

            var fd = new FormData;

            //添加要上传的文件对象

            fd.append("file", file);

            fd.append("hallName", '分会场1');

            fd.append("dateTime", '2019-06-21');

            xhr.open("POST", "/Common/UploadFile");

            xhr.send(fd);

        }

    </script>

</body>

</html>

C#

        public ActionResult UploadFile()

        {

            var baseDirectory = AppDomain.CurrentDomain.BaseDirectory;

            var directory = string.Format("{0}/Upload/{1}/", baseDirectory, Request.Form["hallName"]);

            if (!Directory.Exists(directory))

                Directory.CreateDirectory(directory);

            var file = Request.Files[];

            var fileTypes = new string[] { "image/jpeg", "image/gif", "image/png" };

            if (!fileTypes.Contains(file.ContentType))

                return Json(new Response(, "只可上传图片"));

            Image img = Image.FromStream(file.InputStream);

            var filePath = string.Format("{0}/{1}.jpg", directory, Request.Form["dateTime"]);

            ImageCompress(img, filePath, );

            return Json(new Response());

        }

        /// <summary>

        /// 将图片按百分比压缩

        /// </summary>

        public static bool ImageCompress(Image source, string savePath, byte percent)

        {

            var parameters = new EncoderParameters();

            parameters.Param[] = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, new long[] { percent });

            try

            {

                ImageCodecInfo[] arrayICI = ImageCodecInfo.GetImageDecoders();

                ImageCodecInfo jpegICIinfo = arrayICI.SingleOrDefault(a => a.FormatDescription.Equals("JPEG", StringComparison.OrdinalIgnoreCase));

                if (jpegICIinfo != null)

                    source.Save(savePath, jpegICIinfo, parameters);

                else

                    source.Save(savePath, source.RawFormat);

                return true;

            }

            catch (Exception ex)

            {

                return false;

            }

            finally

            {

                source.Dispose();

            }

        }

原生 js 上传图片的更多相关文章

  1. 原生js上传图片遇到的坑（axios封装）

    后台给我写了一个上传图片的接口,自己用form表单测试成功 接口可以正常跳转 测试的代码: <!doctype html> <html lang="en"> ...

  2. 原生js上传图片时的预览

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  3. 原生js上传图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 原生js复制粘贴上传图片前后台代码，兼容firebox，chrome， ie11，亲测有效

    需求:粘贴上传图片,截图工具,右键粘贴,或者ctrl+v粘贴 方法1:可直接套用富文本框的图片上传功能,完成复制粘贴 缺点:麻烦,样式难控制 方法2:用原生js完成,以下案例基于此,样式请自己动手调整 ...

  5. 纯原生js移动端图片压缩上传插件

    前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...

  6. 原生js开发，无依赖、轻量级的现代浏览器图片懒加载插件，适合在移动端开发使用

    优势 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高 比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形. 完美解决移动 ...

  7. 原生js实现图片预览并上传

    最近主导的PC客户端网站重构工程告一段落,下一阶段开始给公司APP开发H5页面,技术栈是react.最近碰到一个需求:需要在H5页面上添加身份证照片,预览并上传.因为要兼容安卓4.4以下版本的手机,所 ...

  8. 原生JS实现拼图游戏

    最近无聊,练练原生JS:实现拼图游戏.两种玩法:第一种是单击元素进行交换位置:第二种是拖拽元素进行位置交换.首先需要上传图片并进行回显(需要用到FileReader):下面是部分截图: 可以自行设置切 ...

  9. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

随机推荐

  1. hdu 5023（线段树区间染色，统计区间内颜色个数）

    题目描述:区间染色问题,统计给定区间内有多少种颜色? 线段树模板的核心是对标记的处理 可以记下沿途经过的标记,到达目的节点之后一块算,也可以更新的时候直接更新到每一个节点 Lazy操作减少修改的次数( ...

  2. bzoj2693

    线性筛+莫比乌斯反演 盗波图 来自candy?大神 反演很重要的一条公式就是[gcd(i,j)==1]= 线性筛怎么推呢? 我们分4个步骤,1.先推出f[1],2.推出f[p],p是一个质数,3.由于 ...

  3. 使用MvcMiniProfiler调试ASP.NET MVC网站性能

    http://www.cnblogs.com/qiuliang/archive/2011/12/01/2270909.html 使用MiniProfiler给Asp.net MVC和Entity Fr ...

  4. 比Android更深远的改变世界——谷歌开源人工智能系统TensorFlow文档中文版

    OpenStack中国社区编者按:开源无处不在,特别在基础创新领域,未来系统软件都会是开源为主流:2015年11月9日,Google于开源了其第二代人工智能系统Tensorflow,如同6年前同样开源 ...

  5. Linux 系统管理命令 - mpstat - CPU信息统计

    命令详解 重要星级: ★★★★☆ 功能说明: mpstat 是 Multiprocessor Statistics 的缩写,是一种实时系统监控工具.mpstat 命令会输出 CPU 的一些统计信息,这 ...

  6. bzoj 1597: [Usaco2008 Mar]土地购买【斜率优化】

    按xy降序排序,把能被完全包含的去掉 然后就得到了x升序y降序的一个数组 然后方程就显然了:f[i]=min(f[j]+y[j+1]x[i]) 斜率优化转移 说起来我还不会斜率优化呢是不是该学一下了 ...

  7. Linux的防火墙概念

    #linux的防火墙概念#因为如果你不关防火墙,很可能运行 django.nginx.mysql出错#防火墙可能会阻挡端口流量的 出口#也会阻挡外来请求的 入口 #selinux iptables f ...

  8. Qt对象模型之一：信号和槽

    一.信号和槽机制概述 信号槽是 Qt 框架引以为豪的机制之一.所谓信号槽,实际就是观察者模式.当某个事件发生之后,比如,按钮检测到自己被点击了一下,它就会发出一个信号(signal).这种发出是没有目 ...

  9. Spring配置文件中未引入dubbo命名空间头部配置而引起的错误案例

    问题描述: Spring配置文件中未引入dubbo命名空间的头部配置而引起项目启动时报出如下错误信息: org.springframework.beans.factory.xml.XmlBeanDef ...

  10. javaservlet介绍

    servlet 是 serve applet的意思  Java servlet是用Java编写的服务器端程序.其主要功能在于交互式地浏览和修改数据,生成动态Web内容. Servlet运行于支持Jav ...