input中file类型js保存

你可以使用以下代码将input中选择的文件保存为JS文件：

const input = document.querySelector('input[type="file"]');

input.addEventListener('change', function(event) {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.readAsText(file);
  reader.onload = function() {
    const content = reader.result;
    const filename = file.name;
    const blob = new Blob([content], {type: "text/javascript;charset=utf-8"});
    saveAs(blob, filename);
  };
});

这个代码使用FileReader API读取选择的文件内容，然后使用Blob和FileSaver.js库将内容保存为JS文件。请确保在HTML中引入FileSaver.js库。

相关问题

input type= file通过ajax异步提交，前后端的代码

前端代码：

<form id="myForm">
  <input type="file" name="file">
  <button type="button" onclick="uploadFile()">上传文件</button>
</form>

function uploadFile() {
  var formData = new FormData();
  formData.append("file", document.getElementById("myForm").file.files[0]);
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/upload", true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log("上传成功");
    } else {
      console.log("上传失败");
    }
  };
  xhr.send(formData);
}

后端代码（以Node.js为例，使用Express框架）：

const express = require("express");
const app = express();
const multer = require("multer");
const upload = multer({ dest: "uploads/" });

app.post("/upload", upload.single("file"), (req, res) => {
  console.log(req.file); // 上传的文件信息
  res.send("上传成功");
});

app.listen(3000, () => {
  console.log("服务器已启动");
});

在后端代码中，使用multer中间件处理上传的文件，并将文件保存在指定的目录中。在上传成功后，可以根据需要返回相应的信息给客户端。

jQuery动态添加input type=file文件上传域，最后ajax上传所有文件

以下是实现 jQuery 动态添加 input type=file 文件上传域并最后 ajax 上传所有文件的代码。

HTML 代码：

<form id="upload-form">
  <div id="file-list"></div>
  <button id="add-file">添加文件</button>
  <button id="upload-all">上传所有文件</button>
</form>

JavaScript 代码：

$(function() {
  var fileList = $('#file-list');
  var addButton = $('#add-file');
  var uploadAllButton = $('#upload-all');
  var uploadForm = $('#upload-form');
  var fileListData = [];

  addButton.on('click', function() {
    var fileInput = $('<input type="file" name="file">');
    var removeButton = $('<button>删除</button>');
    var listItem = $('<div></div>').append(fileInput).append(removeButton);
    fileList.append(listItem);

    removeButton.on('click', function() {
      listItem.remove();
      fileListData = fileListData.filter(function(data) {
        return data.input[0] !== fileInput[0];
      });
    });

    fileInput.on('change', function() {
      var file = fileInput[0].files[0];
      var data = { input: fileInput, file: file };
      fileListData.push(data);
    });
  });

  uploadAllButton.on('click', function() {
    var formData = new FormData();
    fileListData.forEach(function(data) {
      formData.append('file', data.file);
    });

    $.ajax({
      url: '/upload',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(data) {
        console.log('上传成功');
      }
    });
  });
});

具体实现步骤如下：

1. 创建一个表单，包含文件列表容器、添加文件按钮、上传所有文件按钮。

2. 给添加文件按钮绑定一个点击事件，动态创建一个 input type=file 文件上传域和删除按钮，将它们添加到文件列表容器中。

3. 给删除按钮绑定一个点击事件，当点击时将该文件上传域从文件列表容器中删除，并从 fileListData 数组中删除对应的数据。

4. 给文件上传域绑定一个 change 事件，当选择了文件时，创建一个对象，保存文件输入框和文件数据，将它添加到 fileListData 数组中。

5. 给上传所有文件按钮绑定一个点击事件，遍历 fileListData 数组，将每个文件数据添加到 FormData 对象中，然后通过 ajax 发送到服务器。

6. 在 ajax 的 success 回调函数中处理上传成功后的逻辑。

注意，要设置 processData 和 contentType 为 false，这样 jQuery 就会将 FormData 对象中的数据直接发送到服务器，而不是将其转换为字符串发送。