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

biaoblog.cn 个人博客

发布于 2022-08-11 10:57:27

1.2K00

代码可运行

文章被收录于专栏：web技术开发分享web技术开发分享

运行总次数：0

代码可运行

1.使用form上传文件：

<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.获取文件详细属性：

$("#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表单文件：

$("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);
}
})
}