zoukankan      html  css  js  c++  java
  • 原生 js 上传图片

    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[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();
                }
            }
  • 相关阅读:
    phpstorm+xdebug配置
    php5.4 traits
    psr-4
    oAuth 认证和授权原理
    跨域解决方案
    【微信公众平台开发】利用百度接口,制作一键导航功能
    php 加密压缩
    jquery validate使用笔记
    where和having
    在join中,on和where的区别
  • 原文地址:https://www.cnblogs.com/kikyoqiang/p/11064841.html
Copyright © 2011-2022 走看看