代码演示:只取文件名称、文件流两个字段传给后端,其他字段未演示

在这里插入图片描述

文件名称:<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 {
               //上传失败
            }
        }
    });
});
    

关键点:

  1. var file = $("#fileUpload")[0].files[0];获取到有关文件的对象
  2. reader.onload 回调中this的result属性获取到文件流,然后再做处理
    在这里插入图片描述
Logo

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

更多推荐