UNITY 打包web端打开文件对话框上传文件

本文链接：https://blog.csdn.net/weixin_44223927/article/details/134311384

web端打开文件对话框需要调用js代码中的input元素，所以首先需要在Assets\Plugins文件夹下创建.jslib文件放js代码，创建好之后可使用vs code打开jslib文件，并使用javascript语言
使用input元素时需要先创建input,然后点击input打开文件对话框，所以需要分为两步：
1.unity点击按钮1创建input元素
2.unity点击按钮2通过input元素拉起文件对话框
一、 .jslib文件中创建input元素部分代码如下：

 function LoadFile() {
        var fileInput = document.createElement('input');//创建input元素
        fileInput.setAttribute('id', "load");//给创建的input设置id
        fileInput.accept=".xls,.xlsx";//以excel表为例，打开其他文件时自行设置
        fileInput.setAttribute('type', 'file');
        fileInput.setAttribute('style','display:none;');
        fileInput.setAttribute('style','visibility:hidden;'); 
        fileInput.setAttribute('multiple', '');
        fileInput.disabled=true;//使input元素不可点击，否则会导致页面上所有位置都可唤起文件对话框
        document.body.appendChild(fileInput);
     }

在UNITY中调用该方法

[DllImport("__Internal")]
    private static extern void LoadFile();
public void Add_File()
{
    if (Application.platform == RuntimePlatform.WebGLPlayer)
    {
       LoadFile();//web端调用方法
    }
}

将Add_File()挂在创建按钮1上

二、.jslib文件中拉起文件对话框部分代码如下：

function OpenFile()
    {
        var fileInput = document.getElementById("load");//通过id获取创建好的input元素
        fileInput.disabled=false;//设置input可点击，否则无法通过click()打开文件对话框
        fileInput.click()//打开文件对话框
        fileInput.onclick = function (event) {
            this.value = null;
        };
        fileInput.onchange = function (event) {
           //如果需要在unity中获取文件内容，在onchange中获取后通过SendMessage()传回给unity
           var test = new FileReader();
            var file = this.files[0];
            test.readAsArrayBuffer(file);
            test.onload = function(e){
                 var data = e.target.result;
                 var wb = window.XLSX.read(data,{type:'binary'});
                 var sheetName = wb.SheetNames[0]
                 var sheets = wb.Sheets[sheetName]
                  //转换为json格式
                 var source=JSON.stringify(XLSX.utils.sheet_to_json(sheets));
                 SendMessage("Import", "OnDataUpload", source);//Import是接收数据的cs文件名，OnDataUpload是接收数据的回调函数名
        }
        document.onmouseup = function() {
            fileInput.click();
            document.onmouseup = null;
        }
        fileInput.disabled=true;//结束时再次设置input不可点击，保证点击其他位置无法打开文件对话框
        //确保只有点击按钮2时才能打开文件对话框
    }

UNITY接收excel数据代码，注意接收到的数据不要直接使用，赋值给已有的字符串变量后再使用


    string exceldata;
    public void OnDataUpload(string data)//获取Excel数据
    {
        exceldata = System.Net.WebUtility.UrlDecode(data);
    }

在UNITY中调用该方法

[DllImport("__Internal")]
    private static extern void OpenFile();
    public void FileOpen()
    {
        if (Application.platform == RuntimePlatform.WebGLPlayer)
        {
            OpenLoadFile();
        }
     }