HTML5+AJAX+WEBAPI 文件上传

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5+AJAX+WEBAPI 文件上传相关的知识，希望对你有一定的参考价值。

总体的思路是把文件转换成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 文件上传的主要内容，如果未能解决你的问题，请参考以下文章

AJAX文件上传实践与分析，带HTML5文件上传API。

HTML5多文件上传：通过AJAX一一上传

HTML5 使用 AJAX 上传多个文件？

WebApi2 文件图片上传下载

将大文件切成块并使用 ajax 和 html5 FileReader 上传

Html5 js上传插件resumable.js 的使用