我用的是jQuery.ajaxfileupload.js 稍后弄个网盘链接给大家下载
第一步不多说,导入相应的jar包 jquery.js必须先导入再导入jQuery.ajaxfileupload.js
第二步,html中添加控件:
<div class="main-btn"><a id="changeImg" href="#" οnclick="changeImg();">更换图片</a></div> <input type="file" id="img" name="img" style="opacity:0" οnchange="sendChange()"> <input type="submit" style="opacity:0" id="send">
因为初始控件的文件上传样式实在太丑,所以我加了style="opacity:0"用于隐藏,而是另外弄一个div作为显示,通过触发的形式进行上传。
当点击更换图片时触发changeImg()方法,而changeImg()又触发真正的file进行打开选择文件。
当我们选择好图片点击打开时,将会触发οnchange="sendChange()",该方法调用 fileUpload();也就是真正异步用于处理图片上传的。
<script> function changeImg(){ $('#img').click(); } function sendChange(){ fileUpload(); } function fileUpload() { var formData = new FormData(); formData.append('img', $('#img')[0].files[0]); if(!validate_img($('#img'))){ return; } $.ajax({ url: 'http://localhost:8080/file/imgUpLoad', type: 'POST', cache: false, data: formData, processData: false, contentType: false, beforeSend:function(){ }, success:function(data){ alert(data.msg); if(data.code==1){ window.location.reload(); } }, error:function(){ } }); } //限制上传文件的类型和大小 function validate_img(ele){ // 返回 KB,保留小数点后两位 //alert((ele.files[0].size/(1024*1024)).toFixed(2)); var file = ele.val(); if(!/.(gif|jpg|jpeg|png|GIF|JPG|bmp)$/.test(file)){ alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种"); return false; }else{ //alert((ele.files[0].size).toFixed(2)); //返回Byte(B),保留小数点后两位 if(((ele[0].files[0].size).toFixed(2))>=(2*1024*1024)){ alert("请上传小于2M的图片"); return false; }else return true; } return false; } </script>
完成html,接下来看controller
@Controller @RequestMapping("/file") public class FileController { private static final Logger logger = LoggerFactory.getLogger(FileController.class); //图片上传相关代码 @RequestMapping(value = "/imgUpLoad") @ResponseBody public String imgUpLoad(@RequestParam("img") MultipartFile file, HttpServletRequest request) { if (file.isEmpty()) { return new String("文件为空"); } // 获取文件名 String fileName = file.getOriginalFilename(); logger.info("上传的文件名为:" + fileName); // 获取文件的后缀名 String suffixName = fileName.substring(fileName.lastIndexOf(".")); logger.info("上传的后缀名为:" + suffixName); if(".jpg".equals(suffixName.trim())||".png".equals(suffixName.trim())){ // 文件上传后的路径 String filePath = "D://IDEA//course01//src//main//resources//static//download//img//";//服务器路径 // 解决中文问题,liunx下中文路径,图片显示问题 // fileName = UUID.randomUUID() + suffixName; fileName= UUID.randomUUID().toString().replace("-", "")+".png"; File dest = new File(filePath +fileName); // 检测是否存在目录 if (!dest.getParentFile().exists()) { dest.getParentFile().mkdirs(); } try { file.transferTo(dest); } catch (IllegalStateException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } } return new String("上传的不是图片!"); } }
以上步骤就能完成该上传功能咯
jQuery.ajaxfileupload.js下载地址
链接:https://pan.baidu.com/s/1uxs9nC60CliFc0xJsQWWrg 密码:u7jt