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()">

Answer 1

我认为这是不可能的，因为安全性问题。

Answer 2

要在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);
            }
        }

Answer 3

AJAX是一种获取客户端数据并将其异步发送到服务器的方法，而无需使用窗口作为HTTP客户端来显示响应。因此，如果您要上传文件而不触发“页面重新加载”，则您的选择仅限于AJAX或（请不要执行此操作）使用隐藏的iframe并将表单指向此处。如果要将上传的文件存储在浏览器本身中，则可以在不使用AJAX的情况下进行操作，并使用浏览器数据库（Localstorage等），但这不会将文件上传到服务器。

不使用Ajax使用javascript上传文件

3 个答案: