ajax上传图片文件

Posted 2021-02-18 梦想本不会发光，发光的是追逐梦想的我们

html：

 <form enctype="multipart/form-data">
            <p>昵称:<input type="text" id="nickname" /></p>
            <p>头像：<input type="file" id="avator" /></p>
            <p><input type="submit" id="submit" value="提交"/></p>
        </form>

Js：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>

        $(function () {
            $("form").submit(function () {
                var nickname = $("#nickname").val();
                var avator = $(‘#avator‘).get(0).files[0]; //获取上传的文件;//get(0)将Jquery对象转换为DOM对象

                var formData = new FormData();  //创建一个forData 
                formData.append(‘nickname‘, nickname);
                formData.append(‘avator‘, avator); 

                $.ajax({
                    url: ‘/Home/Process‘,
                    method: ‘post‘,
                    data: formData,
                    dataType: ‘json‘,
                    processData: false,//数据处理
                    contentType: false,//内容类型
                    cache: false,
                    async: false,
                    success: (result) => {
                        console.log(result);
                    },
                    error: (error) => {

                    }

                })


            });


        })


    </script>

　ASP.Net MVC 后台：

 public void Process(string nickname, HttpPostedFileWrapper avator)
        {
            //将图片上传到 upload 文件夹下 （upload下，且按照时间存放图片）
            string baseUrl = AppDomain.CurrentDomain.BaseDirectory + "upload\";
            int year = DateTime.Now.Year;
            int month = DateTime.Now.Month;
            int day = DateTime.Now.Day;

            string dayUrl = baseUrl + year + "\" + month + "\" + day;

            //判断是否存在年月份文件夹,如果不存在则创建

            if (!Directory.Exists(dayUrl))
            {
                Directory.CreateDirectory(dayUrl);
            }

            //获取拓展名
            string ext = System.IO.Path.GetExtension(avator.FileName);
            //这里可进行判断是否为 合法的格式文件
            //...

            string avatorName = Guid.NewGuid().ToString();

            avator.SaveAs(dayUrl + "\" + avatorName + ext);

        }