限制文件格式、大小
$("#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;}}