HTML5 文件上传的2种方式
以前上传文件需要提交Form表单。
HTML5方式上传文件,可以通过使用FormData类模拟Form表单提交,从而实现无刷新上传文件。
假设有一个文件选择框
<input type="file" name="pic" id="pic" accept="image/gif" />
有下面2种方式上传文件:
1、XMLHttpRequest(有进度事件)
var files = document.getElementById('pic').files; //files是文件选择框选择的文件对象数组
if(files.length == 0) return;
var form = new FormData(),
url = 'http://.......', //服务器上传地址
file = files[0];
form.append('file', file);
var xhr = new XMLHttpRequest();
xhr.open("post", url, true);
//上传进度事件
xhr.upload.addEventListener("progress", function(result) {
if (result.lengthComputable) {
//上传进度
var percent = (result.loaded / result.total * 100).toFixed(2);
}
}, false);
xhr.addEventListener("readystatechange", function() {
var result = xhr;
if (result.status != 200) { //error
console.log('上传失败', result.status, result.statusText, result.response);
}
else if (result.readyState == 4) { //finished
console.log('上传成功', result);
}
});
xhr.send(form); //开始上传
2、Fetch API(目前不支持进度事件)
var form = new FormData(),
url = 'http://.......', //服务器上传地址
file = files[0];
form.append('file', file);
fetch(url, {
method: 'POST',
body: form
}).then(function(response) {
if (response.status >= 200 && response.status < 300) {
return response;
}
else {
var error = new Error(response.statusText);
error.response = response;
throw error;
}
}).then(function(resp) {
return resp.json();
}).then(function(respData) {
console.log('文件上传成功', respData);
}).catch(function(e) {
console.log('文件上传失败', e);
});
参考文章:http://blog.ncmem.com/wordpress/2023/12/26/html5-%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e7%9a%842%e7%a7%8d%e6%96%b9%e5%bc%8f/
欢迎入群一起讨论
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
2019-12-26 asp.net大文件上传解决方案(500M以上)
2019-12-26 PHP 大文件上传解决方案(500M以上)
2019-12-26 c#.net上传文件夹的解决方案
2019-12-26 .net上传文件夹的解决方案
2019-12-26 php上传文件夹的解决方案
2019-12-26 jsp上传文件夹的解决方案
2019-12-26 浏览器上传文件夹的解决方案