file input 移动端选择文件夹_H5 移动端Input File 文件上传以及后端接收

本文介绍了如何在移动端H5页面中使用file input选择文件,并通过Ajax上传文件的Base64字符串。前端部分利用FileReader API读取文件并发送到后端。后端接收到Base64字符串后,根据文件类型进行处理,包括转换为不同的文件格式如word、excel、pdf和txt等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前端部分

前端部分主要用ajax 上传Base64字符串码

$("#fileInput").live("change", function() {

var path = $(this).val();

var showfilename = $(this).parent().parent().prev(); //展示文件名称的view

showfilename.show(); //显示展示名称

showfilename.text(this.files[0].name);

var reader = new FileReader();

reader.readAsDataURL(this.files[0]);

reader.onload = function(e) {

console.log(e.target.result)

mui.ajax(http + _data.upload2, {

data: {

file: e.target.result,

fileModuleName: "saler",

},

dataType: 'json', //服务器返回json格式数据

type: 'post', //HTTP请求类型

timeout: timeOut,

success: function(data) {

//获取返回的上传成功的数据

},

error: function(xhr, type, errorThrown) {

//异常处理;

}

});

};

});

后端部分

后端部分获取Base64之后解析出来,根据不同的格式进行再构造,并传给前端,主要的是格式问题,故格式整合如下(图片类型不变,变得是其他文件类型)

word doc后缀,type为msword

ac5e4f95d5f0

doc.jpg

以此类推

word后缀docx---tyoe为 vnd.openxmlformats-officedocument.wordprocessingml.document

excel后缀xls---vnd-ms-excel

excel后缀xlsx----vnd.openxmlformats-officedocument.spreadsheetml.sheet

pdf后缀 pdf----pdf

txt后缀 ---text/plain

ppt后缀----vnd.openxmlformats-officedocument.presentationml.presentation

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值