javascript - 使用没有ajax的javascript上传文件

Question

我尝试使用输入标签和 type='file' 上传文件，我想将其保存在我的项目文件夹中。我可以在不使用 ajax 的情况下在 javascript 的帮助下做到这一点吗？.. 有什么可能吗？

这是我的代码。

function func3() {
  var x = document.getElementById("myFile");
  if ('files' in x) {
    for (var i = 0; i < x.files.length; i++) {
      var file = x.files[i];
      if ('name' in file) {
        alert("File selected. File name =" + file.name);
      }
    }
  }
}

<input type="file" id="myFile" multiple size="50" onchange="func3()">

标签： javascripthtml

Answer 1

在 js 中上传文件需要添加两个隐藏字段，一个用于文件类型，另一个用于文件内容。您需要将文件内容更改为base64并存储到隐藏字段中。请参见下面的代码。然后使用ajax上传base64内容。

  <input type="file" id="myFile" multiple size="50" onchange="func3(e)">
  <input type="hidden" id="fld-content" name="fld-content">
  <input type="hidden" id="fld-content-type" name="fld-content-type">
 function func3(e) {
            var files = e.target.files;
            var file = files[0];
            var fileType = file.name;
            fileType = fileType.substring(fileType.lastIndexOf(".") + 1);
            if (files && file) {
                var reader = new FileReader();
                reader.onload = function (readerEvt) {
                    var binaryString = readerEvt.target.result;
                    base64 = btoa(binaryString);
                    $('#fld-content-type').val(fileType);
                    $('#fld-content').val(encodeURIComponent(base64));
                };
                reader.readAsBinaryString(file);
            }
        }