H5利用formData来上传文件(包括图片,doc,pdf等各种格式)方法小结!
H5页面中我们常需要进行文件上传,那么怎么来实现这个功能呢??? 我主要谈如下两种方法。
(一)、传统的form表单方法
<form action="/Home/SaveFile1" method="post" enctype="multipart/form-data">
<input type="file" class="file1" name="file1" multiple id="file" />
<button type="submit" class="but1">上传</button>
</form> <script>
document.getElementById("file").onchange = function () {
let filesContent = document.getElementById("file").files;
console.log(filesContent);
}
</script>
这个目前大概了解一下就ok了,反正就需要form 标签,需要配置 method="post" enctype="multipart/form-data" 需要给input 加name= "" 属性。
这个方法相对比较落后了,目前不推荐这么操作,请看第二种方法。
(二)、利用FormData来实现相关的功能
1、html部分按照如下写法(vue写法)即可,当然,样式问题可以根据自己的想法把上传上去的文件样式进行优化。发现没有,这里不需要写name属性,因为后续的new formData 里面的键就代表name
<input
type="file"
class="upload"
@change="addImg" // 监听input的改变,改变即可获取上传的文件内容。
ref="inputer"
accept="image/*" // 代表限制上传的格式,这里表示限制为图片,其他格式参照网上其他说明
multiple // 代表可以上传多个文件,去掉则不可一下子多图上传
/>
展示上传文件的大概html格式
<div class="uploadBox" v-for="(value, key) in imgs" :key="key">
<img :src="getObjectURL(value)" alt class="uploadImg" />
<img src="../../assets/images/close.png" alt class="closeImg" @click="delImg(key)" />
</div>
2、js 部分如下:
data() {
return {
formData: new FormData(),
imgs: {}, 这个是用来保存所有的上传内容,对象格式,键值对格式
imgLen: 0,
};
},
addImg() { // 监听了input的改变
let that = this;
let inputDOM = this.$refs.inputer; // 获取input的dom元素
this.fil = inputDOM.files; // 获取dom元素对应的files内容,注意files的内容为js对象格式,即key,value,我们真正需要的文件内容为value. for (let i = 0; i < this.fil.length; i++) { //遍历files 然后判断上传的每个文件大小,如果不符合要求则返回
let size = Math.floor(this.fil[i].size / 1024);
if (size > 5 * 1024 * 1024) {
that.$toast({
message: "请输入5M以内的文件",
position: "middle",
duration: 1500
});
return false;
}
this.imgLen++;
this.$set( // 对于符合要求的文件则push进imgs对象中,这里给文件对象的key通过时间戳进行改名,当然这里不改也可以。
this.imgs,
this.fil[i].name + "?" + new Date().getTime() + i,
this.fil[i]
); // 至此我们就把累积的上传的文件都放在了imgs对象中,相当于我们不直接用files对象,而是经过自己处理,得出的一个新的imgs对象。
}
},
delImg(key) { // 这个是用来把展示的文件进一步删除后的操作。
this.$delete(this.imgs, key);
this.imgLen--;
},
getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file);
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file);
}
return url;
},
传完毕文件并展示出来后,那么我们就需要进行正式上传了,如下便是js真正提交的方法。
ajax方法上传一张图片及多张图片的方法:
submit() {
let that = this;
// 单张图的方法
for (let key in this.imgs) { //即使上传一张图片也得进行循环,要么无法拿到value的值。
this.formData.append('filename', this.imgs[key]); // 注意这里的filename 和input 直接写name = "filename" 是等价的!!!也就是这个名字需要和后台进行约定!!!
}
// 多张图的方法
this.formData.append('id', that.id); // formdata不仅可以传文件,也可以顺便传点普通的值!!!下同
this.formData.append('uid', that.uid);
this.formData.append('content', that.desc);
mui.showLoading("图片上传中..","div");
$.ajax({
url: api_url + '/api2_1/TaskApply/tkAdd2',
type: 'POST',
cache: false, //上传文件不需要缓存
data: this.formData,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success: function (res) {
console.log(res)
if (res.code == 200) {
mui.hideLoading();
window.location.href = "index.html";
} else if (res.code == 401) {
mui.toast("图片不能为空", {
duration: 'short',
type: 'div'
});
}
},
error: function (data) {
console.log(data)
}
})
},
axios 上传图片的方法
let config = {
headers: { "Content-Type": "multipart/form-data" }
};
console.log(that.imgs);
for (let key in that.imgs) {
that.formData.append("filename[]", that.imgs[key]);
}
that.$post("/Recruit/uploadfile", that.formData, config).then((res)=>{ })
完毕!!!
尤其需要注意多图上传的写法。
H5利用formData来上传文件(包括图片,doc,pdf等各种格式)方法小结!的更多相关文章
- 利用formdata对象上传文件时,需要添加的参数
function doUpload() { var formData = new FormData($( "#uploadForm" )[0]); $.ajax({ url: 'h ...
- 使用FormData上传文件、图片
关于FormData XMLHttpRequest Level 2添加了一个新的接口 ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XM ...
- 通过jQuery Ajax使用FormData对象上传文件
FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...
- IT轮子系列(四)——使用Jquery+formdata对象 上传 文件
前言 在MVC 中文件的上传,一般都采用控件: <h2>IT轮子四——文件上传</h2> <div> <input type="file" ...
- 通过jQuery Ajax使用FormData对象上传文件 (转载)
XMLHttpRequest Level 2 添加了一个新的接口——FormData.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件.jQuery 2.0+ ...
- [转] 通过jQuery Ajax使用FormData对象上传文件
FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...
- python中使用multipart/form-data请求上传文件
最近测试的接口是上传文件的接口,上传单个文件,我主要使用了2种方法~ 接口例如: URL: http://www.baidu.com/*** method:post 参数: { "salar ...
- 使用python或robotframework调multipart/form-data接口上传文件
这几天调一个multipart/form-data类型的接口,遇到点小阻碍.之前同事有使用urllib库写了个类似的方法实现,比较长,想要改的时候发现不太好使.在网上查找发现用requests库做这个 ...
- Webform之FileUpload(上传按钮控件)简单介绍及下载、上传文件时图片预览
1.FileUpload上传控件:(原文:http://www.cnblogs.com/hide0511/archive/2006/09/24/513201.html) FileUpload 控件显示 ...
随机推荐
- go开发环境
1.go 下载地址 https://studygolang.com/dl 根据操作系统 下载相应的安装包 2.设置环境变量 goroot gopath path 增加%goroot%\bin 3.开发 ...
- golang(三)
map(声明.初始化和 make) 1. 概念2.map 容量3. 用切片作为 map 的值 概念 map 是引用类型,可以使用如下声明: var map1 map[keytype]valuetype ...
- mysql连接不释放
环境: 持久层:JPA 数据库连接池:druid 数据库中间件:Mycat 数据库:Mysql 报错: Unable to acquire JDBC Connection 排查步骤: 方法一: 1.d ...
- git如何支持doc文档
这个问题很容易解决,只要添加一个 .gitattributes 内容如下: ////////////////////////////////////////////////////////////// ...
- MVC的Views中使用递归生成Html【转】
在开发过程中往往会有一个需求,就是将一个树状的数据结构在视图中表示出来.例如最传统的多级分类,系统中有一系列根分类,每个分类中又带有一些子分类,而我们的目标便是在页面上生成一个由ul和li嵌套组成的H ...
- 2019 世纪龙java面试笔试题 (含面试题解析)
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.世纪龙等公司offer,岗位是Java后端开发,因为发展原因最终选择去了世纪龙,入职一年时间了,也成为了面试官 ...
- vue从零开始(二)指令
一.v-text和v-html <span v-text="msg"></span> <div v-html="html"> ...
- koa2--nodemailer实现邮箱验证
依赖包安装: /** * koa-bodyparser用于把formData数据解析到ctx.request.body * 通过ctx.request.body访问请求的参数 * koa-redis用 ...
- Html-元素类型笔记
注意点: 元素类型分为 块级元素 和 行内元素 块级元素: 在网页中以块的形式显示,默认情况都会占据一行,两个相邻的块级元素不会出现并列显示的元素,按照顺序自上而下排列. 块级元素可以定义自己的宽度和 ...
- 基于web站点的xss攻击
XSS(Cross Site Script),全称跨站脚本攻击,为了与 CSS(Cascading Style Sheet) 有所区别,所以在安全领域称为 XSS. XSS 攻击,通常指黑客通过 HT ...