WebApi多图上传

发布于 9 天前  37 次阅读


在写项目中多图上传是必不可少的一项,今天总结一下自己遇到的上传图片的坑。

这里只是一个演示并没有处理的很细节

1、前几天用老师那个多图上传插件(ajaxFileUpload),发现一个问题(回调函数会不执行,也有可能是自己操作失误,但是问过度娘后发现也有人跟我一样踩到这坑),我怀疑是插件本身的问题!

于是自己写了一个原生AJAX 发现成功了,找这个回调函数不执行问题找哭了。

前台部分

使用form表单

JS部分

 var fm=document.querySelector('form');
 var formdata=new FormData(fm);
 var xhr=window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
                    xhr.open("post","http://localhost:2108/api/UserInfo/Upload");
                    xhr.send(formdata);
                    xhr.onreadystatechange=function(){
                        if(xhr.readyState==4 && xhr.status==200){
                            //console.log(xhr.responseText);
                            // console.log(xhr.responseXML);
                            // 将后台返回值转换为json格式
                            var ht=xhr.responseText;
                            var jsonht= JSON.parse(ht)
                           // console.log(jsonht)
                            for(var i=0;i<jsonht.length;i++)
                            {
                                 console.log(jsonht[i]);
                            }
                        }
                    }

后台部分

 [HttpPost]
        public IHttpActionResult Upload()
        {
            //1、多图上传
            HttpContext context = HttpContext.Current;
            HttpFileCollection files = context.Request.Files;
            //2、使用一个list集合存储得到的图片路径
            List finame = new List();
            if (files.Count!=0)
            {
            //string strPath = path + "upload/";
            string guid = "";

            for (int i = 0; i < files.Count; i++)
            {
                // 1、获取文件后缀
                string filename = files[i].FileName;
                FileInfo fileInfo = new FileInfo(filename);
                string ext = fileInfo.Extension;
                //1.1 防止图片名称重复
                guid = Guid.NewGuid().ToString() + ext;
                //2、替换guid -
                guid = guid.Replace("-", "");
                //3、保存图片到~/upload/
                string path = context.Request.MapPath("~/upload/");
                finame.Add(path + guid);
                 //finame = path + guid;
                files[i].SaveAs(path + guid);
            }

            }
            else
            {
                return NotFound();
            }

            return Json(finame); //返回所有保存成功后的文件

最后得到返回的图片