Asp.Net中WebApi多图片上传（附前后端代码）

最新推荐文章于 2020-08-06 11:32:29 发布

香煎三文鱼

最新推荐文章于 2020-08-06 11:32:29 发布

阅读量882

点赞数

分类专栏： webapi ajax 文章标签： webapi上传图片

原文链接：https://blog.csdn.net/GreyCastle/article/details/92226066

版权

webapi 同时被 2 个专栏收录

15 篇文章 2 订阅

订阅专栏

ajax

5 篇文章 0 订阅

订阅专栏

前言：

在我们开发中，上传图片这样的需求很常见。这几天我在做项目的时候就遇到了，在用webapi中做上传图片和MVC和一般处理程序还不一样，后台老是拿不到前台传递的数据，之前用一般处理程序和MVC就没遇到这种情况，经过几天的查询资料，今天终于实现了，利用的是Base64编码传输，后端接受Base64的编码数据进行解析，将图片保存。

下面不多说直接进入正题。

前端代码 ajax3

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <style type="text/css">
    	 .float{   
 
        float:left;   
 
        width : 200px;   
 
        height: 200px;  
 
         overflow: hidden;   
 
        border: 1px solid #CCCCCC;  
 
         border-radius: 10px;   
 
        padding: 5px; 
 
          margin: 5px;  
 
     }   
 
    img{   
 
        position: relative;  
 
     }   
 
    .result{   
 
        width: 200px;   
 
        height: 200px;  
 
         text-align: center;   
 
        box-sizing: border-box;  
 
     }
 
    #file_input{ 
 
        display: none; 
 
    }
    </style>
    <script type="text/javascript" src="jquery-2.1.4/jquery.min.js"></script>
    <script>
    	window.onload = function(){   
 
    var input = document.getElementById("file_input");   
 
    var result;   
 
    var dataArr = []; // 储存所选图片的结果(文件名和base64数据) 
    var guid="123456";
 
    var fd;  //FormData方式发送请求   
 
    var oSelect = document.getElementById("select"); 
 
    var oAdd = document.getElementById("add"); 
 
    var oSubmit = document.getElementById("submit"); 
 
    var oInput = document.getElementById("file_input"); 
 
    if(typeof FileReader==='undefined'){   
 
        alert("抱歉，你的浏览器不支持 FileReader");   
 
        input.setAttribute('disabled','disabled');   
 
    }else{   
 
        input.addEventListener('change',readFile,false); 
 
      }
 
    function readFile(){  
 
        fd = new FormData();
 
           var iLen = this.files.length; 
 
        var index = 0; 
 
        for(var i=0;i<iLen;i++){ 
 
            if (!input['value'].match(/.jpg|.gif|.png|.jpeg|.bmp/i)){　　//判断上传文件格式   
 
                return alert("上传的图片格式不正确，请重新选择");   
 
            } 
 
            var reader = new FileReader(); 
 
            reader.index = i;   
 
            fd.append(i,this.files[i]); 
 
            reader.readAsDataURL(this.files[i]);  //转成base64
 
               reader.onload = function(e){ 
 
                 var imgMsg = this.result ;
 
                dataArr.push(imgMsg);  
 
                result = '<div class="result"><img src="'+this.result+'" alt=""/></div>';   
 
                var div = document.createElement('div'); 
 
                div.innerHTML = result;   
 
                div['className'] = 'float'; 
 
                div['index'] = index;   
 
                document.getElementsByTagName('body')[0].appendChild(div);  　　//插入dom树   
 
                var img = div.getElementsByTagName('img')[0]; 
 
                img.onload = function(){   
 
                    var nowHeight = ReSizePic(this); //设置图片大小   
 
                    this.parentNode.style.display = 'block';   
 
                    var oParent = this.parentNode;   
 
                    if(nowHeight){   
 
                        oParent.style.paddingTop = (oParent.offsetHeight - nowHeight)/2 + 'px';   
 
                    }   
 
                }
 
                index++; 
 
            }   
 
        }   
 
    }  
 
    function send(){  
 
        var submitArr = []; 
 
        for (var i = 0; i < dataArr.length; i++) { 
 
            if (dataArr[i]) { 
 
                submitArr.push(dataArr[i]); 
 
            } 
 
        } 
 
        $.ajax({   
 
            url : 'http://localhost:63938/ApiRoot/TestUpLoadImg/UpLoadImg', 
 
              type : 'post',
 
            data : {"image":dataArr,"guid":guid},   
 
            dataType: 'json',   
 
             success : function(data){   
 
                if (data == 1) {
 
                    alert("图片上传成功");
 
                }else{
 
                    alert("图片上传失败");
 
                }
 
          　}
 
        })   
 
    }
 
    oSelect.onclick=function(){  
 
        oInput.value = "";   // 先将oInput值清空，否则选择图片与上次相同时change事件不会触发 
 
        $('.float').remove();  //清空已选图片 
 
        dataArr = []; 
 
         index = 0;    
 
             oInput.click();  
 
    }  
 
    oAdd.onclick=function(){ 
 
        oInput.value = "";   // 先将oInput值清空，否则选择图片与上次相同时change事件不会触发 
 
        oInput.click();  
 
    }  
 
    oSubmit.onclick=function(){  
 
         if(!dataArr.length){   
 
            return alert('请先选择文件');   
 
        }   
 
        send();   
 
    }   
 
}              
function ReSizePic(ThisPic) {   
 
    var RePicWidth = 200; //这里修改为您想显示的宽度值
 
          var TrueWidth = ThisPic.width; //图片实际宽度   
 
    var TrueHeight = ThisPic.height; //图片实际高度 
 
        if(TrueWidth>TrueHeight){   
 
        var reWidth = RePicWidth;//宽大于高 
 
        ThisPic.width = reWidth;    
 
        var nowHeight = TrueHeight * (reWidth/TrueWidth); //垂直居中   
 
         return nowHeight;  //将图片修改后的高度返回，供垂直居中用   
 
    }else{  
 
         var reHeight = RePicWidth; //宽小于高    
 
         ThisPic.height = reHeight; 
 
      }   
 
}   
    </script>
    <body>
    	<div class="container">   
 
            <label>请选择一个图像文件：</label> 
 
            <button style="display:none;" id="select">(重新)选择图片</button> 
 
            <button id="add">选择上传图片</button> 
 
            <input type="file" id="file_input" multiple/>
             <!--用input标签并选择type=file，记得带上multiple，不然就只能单选图片了-->   
 
            <button id="submit">提交</button>
 
        </div>   
    </body>
</html>

后端代码


public class TestUpLoadImgController : ApiController
    {
        int status = 0;
        //用List集合保存传递过来的Base654格式的图片，前端是用数组存图片进行发送后端的
        //传递的是一个Data对象，我的控制器也用对象类型接受
        public int UpLoadImg(Funny funnyInfo)
        {
            //前端传递的data里的key必须和后台类里的字段保持一致，否则接受不到前端传递的数据
            List<string> imgInfoList = funnyInfo.image;
            string guids = funnyInfo.guid;
            if (imgInfoList != null)
            {
                //图片保存的路径
                string imgPath = HostingEnvironment.MapPath("~/img/");
                if (!Directory.Exists(imgPath))
                {
                    Directory.CreateDirectory(imgPath);
                }
                else
                {
                    
                    foreach (var item in imgInfoList)
                    {
                        Guid guid = Guid.NewGuid();
                        //将图片保存为jpg格式，图片名为guid.jpg
                        string path = imgPath + guid + ".jpg";
                        //调用方法解析Base64编码的图片，并保存图片
                        Base64ToImg(item.Split(',')[1]).Save(path);
                    }
                }
                status = 1;
            }
            return status;
        }
        //解析base64编码获取图片
        private Bitmap Base64ToImg(string base64Code)
        {
            MemoryStream stream = new MemoryStream(Convert.FromBase64String(base64Code));
            return new Bitmap(stream);
        }
        public class Funny
        {
            //用List集合保存传递过来的Base654格式的图片，前端是用数组存图片进行发送后端的
            //传递的是一个Data对象，我的控制器也用对象类型接受
            public List<string> image { get; set; }
            public string guid { get; set; }
        }
    }

效果图