AJAX上传文件,控制文件大小,格式
2017-07-04 15:18
1256 查看
如何利用AJAX进行文件的上传,并对上传内容进行限制,在项目中总会遇见这样的问题,下面就为大家举个栗子。
HTML代码
JS代码部分
这样就可以利用AJAX完成文件的上传,并对格式与大小进行限制。
技术需要交流,大清亡与闭关锁国。
欢迎转载。form 三思 QQ599901155
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
相关文章推荐
- input file 控制上传文件的大小和格式(兼容ie)
- jquery控制上传文件格式、大小以及图片预览功能
- ajaxFileUpload.js上传图片插件,全浏览器兼容,规避json错误,带文件格式大小拦截
- input file 文件上传,js控制上传文件的大小和格式
- js提交form表单 - input file 文件上传控制上传文件的大小和格式
- js提交form表单 - input file 文件上传控制上传文件的大小和格式
- 限制上传文件大小和格式的jQuery插件实例
- 验证上传文件格式、大小
- php中web上传文件的原理及如何限制上传文件的大小及格式
- struts中文件上传的大小控制
- 前台获取并限制上传文件大小、上传文件格式
- 多个上传文件用js验证文件的格式和大小的方法(推荐)
- Struts2文件上传大小控制与提示
- php 上传文件大小控制配置文件中设置的
- asp.net2.0实现文件上传,控制上传文件大小,类型
- struts文件上传 文件大小控制
- 实现struts2文件上传的类型限定以及文件大小控制
- 实现struts2文件上传的类型限定以及文件大小控制
- AJAX和JSP实现的基于WEB的文件上传的进度控制代码第1/2页
- asp.net 上传大文件大小控制方案