您的位置:首页 > Web前端 > JQuery

AJAX上传文件,控制文件大小,格式

2017-07-04 15:18 1256 查看
如何利用AJAX进行文件的上传,并对上传内容进行限制,在项目中总会遇见这样的问题,下面就为大家举个栗子。

HTML代码

<form id="uploadForm" enctype="multipart/form-data">
//enctype必须要设置为multipart/form-data
<input id="file" type="file" name="avater" accept="image/gif, image/jpeg, image/jpg, image/png"/>//accept这里对上传的文件格式进行限制
<!-- <input id="file2" type="text" name="token" value="8sZAmneKa_hCzAxqo0IcHKjPEkjjLfrx_1499133253"/> -->
<button id="upload" type="button">upload</button>
</form>


JS代码部分

$("#upload").click(function () {
let fileSize = 0;
if (!document.getElementById("file").files) {
let filePath = document.getElementById("file").value;
let fileSystem = new ActiveXObject("Scripting.FileSystemObject");
let file = fileSystem.GetFile (filePath);
fileSize = file.Size;
} else {
fileSize = document.getElementById("file").files[0].size;
}
let size = fileSize / 1024;
//获取上传文件的大小,如果超过大小则提示,如果满足则上传
if(size>2000){
alert("附件不能大于2M");
}else {
//定义上传的文件
let formData = new FormData(document.getElementById("uploadForm"));
$.ajax({
url: 'http://192.168.0.168:8888/v1/user/uploadavater',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false
//contentType必须要设置为false
}).done(function(res) {
console.log(res);
}).fail(function(res) {
alert("no")
console.log(res);
});
}
});


这样就可以利用AJAX完成文件的上传,并对格式与大小进行限制。

技术需要交流,大清亡与闭关锁国。

欢迎转载。form 三思 QQ599901155
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  ajax html 前端 jquery