时间:2020-11-28 14:27:46 | 栏目:JavaScript代码 | 点击:次
1、layui没办法与form表单中的其他字段一同提交到后台,所以只能通过先提交图片,然后通过返回的图片的值来提交到数据库
2、先将所需要的jar包导入,我是用的maven所以,需要在父pom.xml文件中添加下面两个jar包(版本自己选择)
<dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </dependency> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.4</version> </dependency>
3、然后编写前台页面
如果只需要上传一张图片可以看上传logo的步骤,多张的话可以看上传图片的步骤
<div> <label class="layui-form-label">logo</label> <div class="layui-input-block"> <button type="button" class="layui-btn" id="uploadLogo"> <i class="layui-icon"></i>选择logo </button> <div class="layui-upload-list"> <!-- 为了回显 --> <img class="layui-upload-img" id="upload-logo" width="150px" src="${educationalType.edLogo}"> </div> <button type="button" class="layui-btn" id="submit_logo">开始上传 </button> <input id="logoText" name="edLogo" type="hidden" /> </div> </div> <div> <label class="layui-form-label">图片</label> <div class="layui-input-block"> <button type="button" class="layui-btn" id="uploadImage"> <i class="layui-icon"></i>选择图片 </button> <div class="layui-upload-list" id="imageView"> <c:if test="${pageFlag == 'updatePage' and educationalType.edImage1 != null}"> <img class="layui-upload-img" id="upload-image1" width="150px" src="${educationalType.edImage1}" > </c:if> <c:if test="${pageFlag == 'updatePage' and educationalType.edImage2 != null}"> <img class="layui-upload-img" id="upload-image2" width="150px" src="${educationalType.edImage2}"> </c:if> </div> <button type="button" class="layui-btn" id="submit_image">开始上传</button> <input id="imageText" name="edImage" type="hidden" /> </div> </div>
上图中input和img的目的是为了可以接收返回值,从而在提交时可以将图片信息上传到后台
<script type="text/javascript"> //上传logo layui.use('upload', function(){ var $ = layui.jquery, upload = layui.upload; //选完文件后不自动上传 upload.render({ elem: '#uploadLogo', url: '${ctx}/upload/uploadLogoToServer.do', auto: false, //multiple: true, choose: function(obj){ console.log(obj) //预读本地文件示例,不支持ie8 obj.preview(function(index, file, result){ $('#upload-logo').attr('src', result); //图片链接(base64) $("#img_url").attr('value',result); }); }, bindAction: '#submit_logo', done: function(res){ $("#logoText").attr('value',res.url); console.log(res) return layer.msg(res.msg,{icon: res.status,time: 2000}); } }); //上传图片 var fileCount = 0;//控制文件数量 var maxFileCount = 2;//文件上传最大数量,如果没有限制上传文件的数量则不需要 var maxFileSize = 20;//文件上传最大大小 var resultValue = 0; var url = ""; upload.render({ elem: '#uploadImage', url: '${ctx}/upload/uploadImageToServer.do', auto: false, //multiple: true, choose: function(obj){ var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列 //layer.load(); console.log(obj) //预读本地文件示例,不支持ie8 obj.preview(function(index, file, result){ fileCount++; if(fileCount>maxFileCount){ fileCount = maxFileCount; layer.msg('文件数量不得超过'+maxFileCount+'个',{icon:2}); return; } //在当前ID为“imageView”的区域显示图片 $('#imageView').append('<img name = "edImage" ' + 'style="width: 150px; margin-left: 8px;" ' + 'src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">') }); }, bindAction: '#submit_image', done: function(res){ if(resultValue < 2){ url = url + res.url + ","; } if(resultValue == 1){ $("#imageText").attr('value',url); } resultValue++; console.log(res) return layer.msg(res.msg,{icon: res.status,time: 2000}); } }); }); </script>
4、因为layui在上传多张图片的时候是通过多次请求传递过去,所以是数据是一条一条的接收的,如果你需要回显,那么就需要在后台进行拼接,不拼接很可能会出现只传返回一张图片的信息
UploadCollect
@RequestMapping(value = "/uploadImageToServer.do") @ResponseBody public ResultMsg insertImageToEducational(@RequestParam(value = "file")MultipartFile[] files) throws Exception { ResultMsg msg = new ResultMsg(); String url = ""; for (int i=0,length = files.length; i < length; i++) { if(files[i] != null && !files[i].isEmpty()) { //获取路径,路径我写的是固定路径,直接映射到服务器根目录下的/usr/Images/logo String upload_path = IMAGE_ROOT_URL; String upload_fileName = FileUpload.uploadFile(files[i], upload_path); msg.setStatus(0); url = url + upload_fileName; }else { msg.setStatus(1); msg.setMsg("上传失败"); msg.setUrl("给一个失败的图片路径"); return msg; } } msg.setStatus(1); msg.setMsg("上传成功"); msg.setUrl(url); return msg; }
FileUpload
public static String uploadFile(MultipartFile multipartFile, String path) throws Exception { File file = new File(path); if (!file.exists()) { file.mkdirs(); } FileInputStream fileInputStream = (FileInputStream) multipartFile.getInputStream(); String fileName = UUID.randomUUID() + multipartFile.getOriginalFilename(); BufferedOutputStream bos = new BufferedOutputStream(new FileOutputStream(path + File.separator + fileName)); byte[] bs = new byte[1024]; int len; while ((len = fileInputStream.read(bs)) != -1) { bos.write(bs, 0, len); } bos.flush(); bos.close(); return fileName; }
5、这就是图片上传的步骤