码迷,mamicode.com
首页 > Windows程序 > 详细

HTML5+AJAX+WEBAPI 文件上传

时间:2016-05-31 23:59:42      阅读:1222      评论:0      收藏:0      [点我收藏+]

标签:

总体的思路是把文件转换成base64字符串传递给后台,然后再把base64字符串转换成二进制,转成文件。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>????html5 File???? for pic2base64</title>
    <script src="Scripts/jquery-1.8.2.js"></script>
    <style>
    </style>
    <script>
        window.onload = function () {
            var input = document.getElementById("demo_input");
            var result = document.getElementById("result");
            var img_area = document.getElementById("img_area");
            if (typeof (FileReader) === undefined) {
                result.innerHTML = "?????????????????? FileReader?????????????????????";
                input.setAttribute(disabled, disabled);
            } else {
                input.addEventListener(change, readFile, false);
            }
        }
        function readFile() {
            var file = this.files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                result.value = this.result;
            
                $.ajax({             
                    type: "POST",
                    url: "神秘的URL/api/TabCompany/POSTUploadCompanyWeChatImg",
                    data: { "base64": result.value, "type": ".jpg" },//所有上传文件统一为此对象。result.value 不再截取。type 为文件类型,带.
                    success: function (data) {         
                        alert("6666666");
                        alert(data);                
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus);
                    }
                });
              
            }
        }
    </script>
</head>
<body>
    <input type="file" value="sdgsdg" id="demo_input" />
    <textarea id="result" rows=30 cols=300></textarea>
    <p id="img_area"></p>
</body>
</html>

后端代码如下

   public string POSTUploadCompanyWeChatImg([FromBody]file base64)
        {
            quence = new ConsenQuance();
            try
            {
                string type = base64.type;
                string base64str = base64.base64.Split(,)[1];
                byte[] data = Convert.FromBase64String(base64str);
                string savePath = "/FileCompanyWeCha/"; //虚拟路径,项目中的虚拟路径。一般我们条用这个方法,肯定要把生成的word文档保存在项目的一个文件夹下,以备后续使用
                string path = ResumePath;//System.Web.HttpContext.Current.Server.MapPath(savePath); //把相应的虚拟路径转换成物理路径
                if (!System.IO.Directory.Exists(path))
                {
                    Directory.CreateDirectory(path);
                }
                savePath += Guid.NewGuid().ToString() + type;
                string filePath = ResumePath + savePath;// System.Web.HttpContext.Current.Server.MapPath(savePath);
                FileStream fs;
                if (System.IO.File.Exists(filePath))
                {
                    fs = new FileStream(filePath, FileMode.Truncate);
                }
                else
                {
                    fs = new FileStream(filePath, FileMode.CreateNew);
                }
                BinaryWriter br = new BinaryWriter(fs);
                br.Write(data, 0, data.Length);
                br.Close();
                fs.Close();

                if (System.IO.File.Exists(filePath))
                {
                    quence.Result = true;
                    quence.ReturnStr = savePath;
                }
                else
                {
                    quence.Result = false;
                    quence.ErrMsg = "服务器创建文档失败";
                }
            }
            catch (Exception ex)
            {
                quence.Result = false;
                quence.ErrMsg = ex.Message;
            }
            return JsonHelp.JsonSerializer<ConsenQuance>(quence);
        }
 
参数实体类
  public   class file
    {
        public string base64 { get; set; }
        public string type { get; set; }
    }

 

用这个代码。并不存在跨域问题。

AJAX解决跨域问题是很郁闷的事情。

另外值得一提的是。WEBAPI的POST请求和WEBSERVICE的是不同的。

HTML5+AJAX+WEBAPI 文件上传

标签:

原文地址:http://www.cnblogs.com/liuruitao/p/5547961.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!