原生 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>

        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[0];
            var fileTypes = new string[] { "image/jpeg", "image/gif", "image/png" };
            if (!fileTypes.Contains(file.ContentType))
                return Json(new Response(302, "只可上传图片"));

            Image img = Image.FromStream(file.InputStream);
            var filePath = string.Format("{0}/{1}.jpg", directory, Request.Form["dateTime"]);
            ImageCompress(img, filePath, 50);
            return Json(new Response());
        }
        /// <summary>
        /// 将图片按百分比压缩
        /// </summary>
        public static bool ImageCompress(Image source, string savePath, byte percent)
        {
            var parameters = new EncoderParameters();
            parameters.Param[0] = 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();
            }
        }