• ajax上传图片文件


    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);
    
            }
    

      

  • 相关阅读:
    react之redux的使用笔记
    react之jsx的使用
    react之第一个组件的定义及使用
    npm
    webpack热加载
    react使用笔记及生命周期
    移动开发的常见问题
    javascript常用的方法
    cordova local notification plugin
    jqmobi 转换语言
  • 原文地址:https://www.cnblogs.com/licm/p/12910933.html
Copyright © 2020-2023  润新知