你可以用js写一个原生的文件上传吗
时间: 2023-04-04 19:02:44 浏览: 84
可以,使用HTML5的File API和XMLHttpRequest对象可以实现原生的文件上传功能。具体实现可以参考以下代码:
HTML部分:
```
<input type="file" id="fileInput">
<button onclick="uploadFile()">上传文件</button>
```
JavaScript部分:
```
function uploadFile() {
var fileInput = document.getElementById("fileInput");
var file = fileInput.files[0];
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
alert("文件上传成功!");
}
};
xhr.send(file);
}
```
以上代码可以实现一个简单的文件上传功能,当用户选择文件并点击上传按钮时,会将文件通过XMLHttpRequest对象发送到服务器端进行处理。
相关问题
用原生js写一个文件上传
HTML代码:
```html
<input type="file" id="fileInput">
<button id="uploadBtn">上传文件</button>
```
JS代码:
```javascript
const fileInput = document.getElementById('fileInput');
const uploadBtn = document.getElementById('uploadBtn');
uploadBtn.addEventListener('click', () => {
const file = fileInput.files[0];
const formData = new FormData();
formData.append('file', file);
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.send(formData);
xhr.onreadystatechange = () => {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
console.log('上传成功');
} else {
console.error('上传失败');
}
}
}
});
```
以上代码监听了上传按钮的点击事件,获取文件输入框中的文件,使用FormData构建表单数据,使用XMLHttpRequest发送POST请求,最后根据请求状态判断上传成功或失败。注意,上传的URL需要根据实际情况修改。
帮我写一个上传文件包含word和表格的格式,同时可以预览用原生h5和js
好的,以下是一个简单的示例代码,可以实现上传Word文档和表格,并使用原生H5和JS进行预览:
HTML代码:
```html
<input type="file" id="file-input" accept=".doc,.docx,.xls,.xlsx">
<div id="preview"></div>
```
JS代码:
```javascript
const fileInput = document.getElementById('file-input');
const previewDiv = document.getElementById('preview');
fileInput.addEventListener('change', (event) => {
// 获取上传的文件
const file = event.target.files[0];
// 如果是Word文档,使用FileReader对象读取内容,并使用Docx.js库进行解析
if (file.type === 'application/msword' || file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
const reader = new FileReader();
reader.onload = () => {
const docx = new DocxJS();
const content = docx.parse(reader.result);
previewDiv.innerHTML = content;
};
reader.readAsArrayBuffer(file);
}
// 如果是Excel表格,使用FileReader对象读取内容,并使用ExcelJS库进行解析
if (file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
const reader = new FileReader();
reader.onload = () => {
const workbook = new ExcelJS.Workbook();
workbook.xlsx.load(reader.result).then(() => {
const worksheet = workbook.getWorksheet(1);
const html = worksheet.getHtml();
previewDiv.innerHTML = html;
});
};
reader.readAsArrayBuffer(file);
}
});
```
需要注意的是,这个示例代码中使用了Docx.js和ExcelJS库进行Word文档和Excel表格的解析,因此需要在代码中引入这两个库。另外,由于浏览器的安全限制,无法直接访问本地文件系统,因此需要让用户手动选择要上传的文件。