前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >表单方式文件上传和获取文件属性

表单方式文件上传和获取文件属性

作者头像
biaoblog.cn 个人博客
发布2022-08-11 18:57:27
1.1K0
发布2022-08-11 18:57:27
举报
1.使用form上传文件:
代码语言:javascript
复制
<form action='uploadFile.php' enctype="multipart/form-data" type='post'>
 <input type='file'>
 <input type='hidden' name='userid'>
 <input type='hidden' name='signature'>
 <button>提交</button>
</form>

注:form表单里发送除文件外的数据,一般是新建一个type=hidden的input,value=‘需要传的数据’,每发送一个数据就需要一个input(相当于参数)

2.获取文件详细属性:
代码语言:javascript
复制
$("#fileContent").change(function(){
// 获取到file对象
 var file = this.files[0]
// 声明FileReader实例化对象
 var fr = new FileReader()
// 使用实例化对象的readAsDataURL API放入file对象
 fr.readAsDataURL(file)
// 最后通过实例化对象的onload事件 获取文件详细属性
 fr.onload = function (event) {
    var data= event.target.result
// 如果是图片则是base64 不然就是blob对象
    console.log(data)
}        
})
3.使用ajax上传form表单文件:
代码语言:javascript
复制
$("input[type='button']").on('click', upfile);
function upfile() {
var formData = new FormData();
formData.append("接收字段1", document.getElementById('file1').files[0]);
formData.append("接收字段2", document.getElementById('file2').files[0]);
$.ajax({
url: '接口地址url',
type: 'POST',
data: formData,
// 上传formdata封装的数据包
dataType: 'JSON',
cache: false,
// 不缓存
processData: false,
// jQuery不要去处理发送的数据
contentType: false,
// jQuery不要去设置Content-Type请求头
success: function(data) {
// 成功回调
console.log(data);
}
})
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.使用form上传文件:
  • 2.获取文件详细属性:
  • 3.使用ajax上传form表单文件:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档