webapi 使用Ajax上传图片

一 前端

html部分代码
<form enctype="multipart/form-data">
        <div>

            <input type="file" name="uploadImage" id="uploadImage">
            <input type="button" id="btn" value="上传" />
        </div>
 </form>

js部分代码

$("#btn").click(function () {             
                    var formData = new FormData();
                    formData.append("FileUpload1",  document.getElementById('uploadImage').files[0]);
                    $.ajax({
                        url: '/api/common/imgupload',
                        type: "POST",
                        data: formData,
                        /**
                        *必须false才会自动加上正确的Content-Type
                        */
                        contentType: false,
                        /**
                        * 必须false才会避开jQuery对 formdata 的默认处理
                        * XMLHttpRequest会对 formdata 进行正确的处理
                        */
                        processData: false,
                        success: function (data) {
                            alert(JSON.stringify(data));
                            
                        }
                    });  

            })

二 webapi 后台

  /// <summary>
        /// 上传
        /// </summary>
        /// <returns></returns>
        [HttpPost]        
        [Route("api/common/imgupload")]
        public Task<Hashtable> Imgupload()
        {
            // 检查是否是 multipart/form-data 
            if (!Request.Content.IsMimeMultipartContent("form-data"))
                throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
            //文件保存目录路径 
            string SaveTempPath = "/upload/head/";
            String dirTempPath = HttpContext.Current.Server.MapPath(SaveTempPath);

            if (!Directory.Exists(dirTempPath))
            {
                Directory.CreateDirectory(dirTempPath);
            }
            // 设置上传目录 
            var provider = new MultipartFormDataStreamProvider(dirTempPath);
            var task = Request.Content.ReadAsMultipartAsync(provider).
                ContinueWith<Hashtable>(o => {
                    Hashtable hash = new Hashtable();
                    hash["code"] = 0;
                    hash["msg"] = "上传出错";
                    var file = provider.FileData[0];
                    string orfilename = file.Headers.ContentDisposition.FileName.TrimStart('"').TrimEnd('"');
                    FileInfo fileinfo = new FileInfo(file.LocalFileName);
                    //最大文件大小 
                    int maxSize = 10000000;
                    if (fileinfo.Length <= 0)
                    {
                        hash["code"] = 0;
                        hash["msg"] = "请选择上传文件。";
                    }
                    else if (fileinfo.Length > maxSize)
                    {
                        hash["code"] = 0;
                        hash["msg"] = "上传文件大小超过限制。";
                    }
                    else
                    {
                        string fileExt = orfilename.Substring(orfilename.LastIndexOf('.'));
                        //定义允许上传的文件扩展名 
                        String fileTypes = "gif,jpg,jpeg,png,bmp";
                        if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(fileTypes.Split(','), fileExt.Substring(1).ToLower()) == -1)
                        {
                            hash["code"] = 1;
                            hash["msg"] = "上传文件扩展名是不允许的扩展名。";
                        }
                        else
                        {
                            String ymd = DateTime.Now.ToString("yyyyMMdd", System.Globalization.DateTimeFormatInfo.InvariantInfo);
                            String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", System.Globalization.DateTimeFormatInfo.InvariantInfo);
                            fileinfo.CopyTo(Path.Combine(dirTempPath, newFileName + fileExt), true);
                            fileinfo.Delete();
                            hash["code"] = 1;
                            hash["msg"] = "上传成功";
                            hash["path"] = SaveTempPath + newFileName + fileExt;
                        }
                    }
                    return hash;
                });
            return task;
        }

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值