jquery file upload 限制上传文件的格式、大小或图片尺寸

限制文件格式、大小

    $("#head").fileupload({url: "/front/user/uploadHead",dataType: 'json',formData: {},add: function (e, data) {var uploadErrors = [];var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;//文件类型判断if(data.originalFiles[0].type.length && !acceptFileTypes.test(data.originalFiles[0].type)) {uploadErrors.push('请上传gif、jpg、jpeg或png格式的文件');}//文件大小判断if(data.originalFiles[0].size > (2*1024*1024)) {uploadErrors.push('请上传不超过2M的文件');}if(uploadErrors.length > 0) {alert(uploadErrors.join("\n"));} else {data.submit();}},done: function (e, data) {//上传完成},})

限制图片尺寸

        //上传商品图片$("#imgUpload").fileupload({url: "/goods/uploadImg",dataType: 'json',formData: {},add: function(e, data) {if (!(window.File || window.FileReader|| window.FileList || window.Blob)) {alert('您的浏览器暂不支持图片预览');return;}//读取图片数据var f = data.originalFiles[0];var reader = new FileReader();reader.onload = function(e) {var datas = e.target.result;//获取图片真实宽度和高度var image = new Image();image.onload = function() {var width = image.width;//图片宽var height = image.height;//图片高if (width!=500||height!=500) {alert("请上传宽500px、高500px的图片，当前图片宽度" + width + "px,高度" + height + "px");return;}data.submit();};image.src = datas;};reader.readAsDataURL(f);},done: function (e, data) {//上传完成},});

简单介绍下 jquery-file-upload 的使用方法

前端代码

<input id="fileupload" type="file" name="file" >

<script>$('#fileupload').fileupload({dataType: 'json',url: "uploadImage",//文件的后台接受地址progressall: function (e, data) {//上传进度var progress = parseInt(data.loaded / data.total * 100);console.log(progress+"%"); },done: function (e, data){//上传完成之后的操作var result=data.result;console.log(result.path);}});
</script>

java代码

    @RequestMapping(value = "/uploadImage")@ResponseBodypublic Map uploadImage(@RequestParam(name = "file") MultipartFile file, HttpServletRequest request) throws Exception{try {String filename = file.getOriginalFilename();String newName = UUID.randomUUID().toString() + "_" + System.currentTimeMillis() + filename.substring(filename.lastIndexOf("."));String path= "/images/goods/" + newName;String realPath = request.getSession().getServletContext().getRealPath(path);File img = new File(realPath);if (!img.exists() && !img.isDirectory()) {img.mkdirs();}file.transferTo(img);Map data=new HashMap();data.put("path",path);return data;} catch (Exception e) {e.printStackTrace();return null;}}

jquery file upload 限制上传文件的格式、大小或图片尺寸相关推荐

antd 中 Upload 上传图片宽高限制以及上传文件的格式限制
一.上传图片的宽高限制在组件Upload中有一个beforeUpload的API,是文件上传之前的钩子函数,我们需要在这个API中做限制 beforeUpload: file => {this ...
jquery form插件(ajax)上传文件实现及原理
原理: jquery form插件ajax上传文件的原理, 1.浏览器实现了XMLHttpRequest level2规范的,则插件使用xhr直接提交文件.通常来说chrome.firefox都实现了 ...
element-ui upload组件上传文件类型限制
element-ui upload组件上传文件类型限制 <el-uploadclass="c-upload"ref="upload":action=&q ...
ajax ashx 请选择文件,ajax+jquery+ashx如何实现上传文件
ajax+jquery+ashx如何实现上传文件第一:建立Default.aspx页面 ajax图片上传 function upload(){ var path = document.getElem ...
Upload手动上传文件
Upload上传文件有两种方式: 1.自动上传,即在选择文件后就立即调用后台接口: 自动上传需要在action中写入请求接口,然后再方法里面写入回调函数即可 2.手动上传,即在选择好文件之后不会立即上 ...
ant design Upload组件上传文件类型
Upload组件上传文件类型设置 1.设置上传文件类型为excel <template><a-uploadname="file":multiple="t ...
ajax异步上传什么意思,使用 jQuery 的 AJAX 异步上传文件
现在基本上很多网页里面都在使用 jQuery,要实现文件的异步上传,大多数的解决方法都是使用 jQuery 插件,如果你只是上传一张图片,使用插件反而觉得多余了,其实 jQuery 的 ajax() ...
【Fastapi】批量上传文件（文档、图片、视频等）
[Fastapi]批量上传文件项目演示功能说明编程思路重要知识点分析源代码项目演示 [Fastapi]批量上传文件(文档.图片.视频等) https://www.bilibili.com/ ...
验证上传文件真实格式
1 /// <summary> 2 /// 验证上传文件真实格式 3 /// </summary> 4 /// <param name="fileUpload& ...

jquery file upload 限制上传文件的格式、大小或图片尺寸

jquery file upload 限制上传文件的格式、大小或图片尺寸相关推荐

最新文章

热门文章