js文件上传(jquery、FileReader、Blob、FormData)
·
代码演示:只取文件名称、文件流两个字段传给后端,其他字段未演示

文件名称:<input type="text" name="fileName" id="fileName"/>
<input type="file" name="fileUpload" id="fileUpload"/>
<button type="button" id="busiFile_submit">提交</button>
var fileStream,fileName = ''
// 1. 当选择好文件时,触发回调,得到文件流(base64格式后面那一串)
$("#fileUpload").on("change", function () {
var file = $("#fileUpload")[0].files[0];
//console.log(file)
if (window.FileReader) {
fileName = file.name;
var reader = new FileReader();
reader.readAsDataURL(file);//把选择的文件读出来
reader.onload = function () {//读完文件之后的回调
var fileData = this.result;
//console.log(fileData)
fileStream = fileData.split(',')[1];
}
}
//2. 提交
$("#busiFile_submit").on("click", function () {
var msg = {
shareFileName: fileName,
fileStream: fileStream,
};
var blob = new Blob([JSON.toStringfy(msg)], {type: 'application/json'});
var formdata = new FormData();
formdata.append("message", blob);
//console.log(formdata)
$.ajax({
url: "smBusiFileTb/add.do",
type: "POST",
data: formdata,
success: function (data) {
var res = JSON.parse(data);
if (res.flag) {
//上传成功
} else {
//上传失败
}
}
});
});
关键点:
var file = $("#fileUpload")[0].files[0];获取到有关文件的对象reader.onload回调中this的result属性获取到文件流,然后再做处理

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)