原生 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[];

            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 上传图片

最新文章

热门文章