主要思路:
在html中添加上传按钮,为了方便,这里使用<img>
作为上传按钮,监听<img>
点击事件,在事件处理函数中,创建<input type="file">
标签,注册<input type="file">
change事件,使用EventTarget.dispatchEvent()触发change事件,在<img>
事件处理函数中,通过fileUpload对象获取上传的文件对象,创建FormData对象,把文件对象append到FormData对象中,通过XMLHttpRequest对象,把文件发送到服务器上。
可能没说清楚:
画个流程图
过程中涉及多个异步操作,可能不太清楚,看代码可能会好点(可以通过Promise对象管理
)
实现代码:
1、在HTML中添加上传按钮
<img src="upload_icon.png" id="upload"/>
2、 注册点击事件
let uploadBtn = document.getElementById("upload");
uploadBtn.addEventListener("click", function(){
/**
* ……
*/
}
3、在点击事件处理函数中创建<input type="file" />
let eInputFile = document.createElement("input");
eInputFile.setAttribute("type", "file");
eInputFile.setAttribute("accept", ".jpg, .jpeg, .png");
4、 添加change监听事件
eInputFile.addEventListener("change", function(oEvent){
/**
* ……
*/
}
5、 在change事件处理函数中获取上传的文件。参考资料:HTML DOM FileUpload 对象
let eInputFile = oEvent.target;
let oFile = eInputFile.files[0];
6、 创建FormData对象,把File对象append到FormData中。参考资料:FormData.append() - Web API 接口 | MDN
let oFormData = new FormData();
oFormData.append("img", oFile);
7、 通过XMLHttpRequest对象把表单数据发送到服务器
let xhr = new XMLHttpRequest();
let sMethod = "post";
let sUrl = "dealUploadImage";
xhr.open(sMethod, sUrl);
xhr.send(oFormData);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
console.log(xhr.responseText);
/**
* 下一步处理
*/
}
}
}
});
8、 触发上传事件事件。参考资料:EventTarget.dispatchEvent() - Web APIs | MDN
let eMouseEvent = new MouseEvent("click");
eInputFile.dispatchEvent(eMouseEvent);
完整代码:
<img src="upload_icom.png" id="upload"/>
<script type="text/javascript">
let uploadBtn = document.getElementById("upload");
uploadBtn.addEventListener("click", function(){
//创建上传文件标签
let eInputFile = document.createElement("input");
eInputFile.setAttribute("type", "file");
eInputFile.setAttribute("name", "certificate");
eInputFile.setAttribute("accept", ".jpg, .jpeg, .png");
//监听上传事件
eInputFile.addEventListener("change", function(oEvent){
let eInputFile = oEvent.target;
let oFile = eInputFile.files[0];
//创建表单对象
let oFormData = new FormData();
//将上传的文件加入到表单对象
oFormData.append("img", oFile);
//ajax
let xhr = new XMLHttpRequest();
let sMethod = "post";
//上传地址
let sUrl = "dealUploadImage";
xhr.open(eMethod, sUrl);
xhr.send(oFormData);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
console.log(xhr.responseText);
/**
* 下一步处理
*/
}
}
}
});
//创建上传事件
let eMouseEvent = new MouseEvent("click");
//自动触发上传事件
eInputFile.dispatchEvent(eMouseEvent);
});
</script>