文件上传——选择文件之后自动上传||文件上传的后端代码

选择文件之后自动上传

//普通图片上传var uploadInst = upload.render({elem: '#test1', url: 'file/upload.action', accept: 'images', acceptMime: 'image/*', auto: true//是否选择文件之后自动上传, field: 'mf' //表单的name值, before: function (obj) {//预读本地文件示例，不支持ie8obj.preview(function (index, file, result) {$('#demo1').attr('src', result); //图片链接（base64）});}, done: function (res) {alert(res);//如果上传失败if (res.code > 0) {return layer.msg('上传失败');}//上传成功layer.msg("上传成功");}, error: function () {//演示失败状态，并实现重传var demoText = $('#demoText');demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');demoText.find('.demo-reload').on('click', function () {uploadInst.upload();});}});

非自动上传

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>文件上传</title><link rel="stylesheet" href="resources/layui/css/layui.css">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>常规使用：普通图片上传</legend>
</fieldset>
<div class="layui-upload"><button type="button" class="layui-btn" id="test1">上传图片</button><div class="layui-upload-list"><img class="layui-upload-img" width="60" height="60" id="demo1"><p id="demoText"></p></div>
</div><fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>选完文件后不自动上传</legend>
</fieldset>
<div class="layui-upload"><button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button><button type="button" class="layui-btn" id="test9">开始上传</button><br><img alt="" src="" id="myimage">
</div><script src="resources/layui/layui.js"></script>
<script type="text/javascript">layui.use(['jquery', 'layer', 'form', 'table', 'laydate', 'upload'], function () {var $ = layui.jquery;var layer = layui.layer;var form = layui.form;var table = layui.table;var laydate = layui.laydate;var upload = layui.upload;//普通图片上传var uploadInst = upload.render({elem: '#test1', url: 'file/upload.action', accept: 'images', acceptMime: 'image/*', auto: true//是否选择文件之后自动上传, field: 'mf' //表单的name值, before: function (obj) {//预读本地文件示例，不支持ie8obj.preview(function (index, file, result) {$('#demo1').attr('src', result); //图片链接（base64）});}, done: function (res) {alert(res);//如果上传失败if (res.code > 0) {return layer.msg('上传失败');}//上传成功layer.msg("上传成功");}, error: function () {//演示失败状态，并实现重传var demoText = $('#demoText');demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');demoText.find('.demo-reload').on('click', function () {uploadInst.upload();});}});//不自动上传upload.render({elem: '#test8',url: 'file/upload.action',field: 'mf',accept: 'images',acceptMime: 'image/*',auto: false,  //去掉自动上传bindAction: '#test9',done: function (res) {if (res.code > 0) {return layer.msg('上传失败');} else {//上传成功layer.msg("上传成功");layer.msg(res.data.src);$("#myimage").attr("src", res.data.src);}},error: function () {layer.msg("服务器异常");}})});
</script>
</body>
</html>

文件上传的后端代码

RandomUtils.java

package com.sxt.utils;import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Random;
import java.util.UUID;/*** 随机工具类*/
public class RandomUtils {private static SimpleDateFormat sdf1=new SimpleDateFormat("yyyy-MM-dd");private static SimpleDateFormat sdf2=new SimpleDateFormat("yyyyMMddHHmmssSSS");private static Random random=new Random();/*** 得到当前日期*/public static String getCurrentDateForString() {return sdf1.format(new Date());}/*** 生成文件名使用时间+4位随机数* @param suffix 文件名称*/public static String createFileNameUseTime(String fileName) {String fileSuffix=fileName.substring(fileName.lastIndexOf("."),fileName.length());String time=sdf2.format(new Date());Integer num=random.nextInt(9000)+1000;return time+num+fileSuffix;}/*** 生成文件名使用UUID* @param suffix 文件名称*/public static String createFileNameUseUUID(String fileName) {String fileSuffix=fileName.substring(fileName.lastIndexOf("."),fileName.length());return UUID.randomUUID().toString().replace("-", "").toUpperCase()+fileSuffix;}public static void main(String[] args) {System.out.println(createFileNameUseUUID("fasdfasdfsda,a,ff.d,sfmslafsa.gif"));}
}

AppFileUtils.java

package com.sxt.utils;import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.net.URLEncoder;
import java.util.Properties;import javax.servlet.http.HttpServletResponse;import org.apache.commons.io.FileUtils;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;public class AppFileUtils {/*** 得到文件上传的路径*/public static String PATH;static {InputStream stream = AppFileUtils.class.getClassLoader().getResourceAsStream("file.properties");Properties properties=new Properties();try {properties.load(stream);PATH=properties.getProperty("path");} catch (IOException e) {e.printStackTrace();}}/*** 文件下载*/public static  ResponseEntity<Object> downloadFile(HttpServletResponse response, String path, String oldName) {//4,使用绝对路径+相对路径去找到文件对象File file=new File(AppFileUtils.PATH,path);//5,判断文件是否存在if(file.exists()) {try {try {//如果名字有中文 要处理编码oldName=URLEncoder.encode(oldName, "UTF-8");} catch (Exception e) {e.printStackTrace();}//把file转成一个bytesbyte [] bytes=FileUtils.readFileToByteArray(file);HttpHeaders header=new HttpHeaders();//封装响应内容类型(APPLICATION_OCTET_STREAM 响应的内容不限定)header.setContentType(MediaType.APPLICATION_OCTET_STREAM);//设置下载的文件的名称header.setContentDispositionFormData("attachment", oldName);//创建ResponseEntity对象ResponseEntity<Object> entity=new ResponseEntity<Object>(bytes, header, HttpStatus.CREATED);return entity;} catch (Exception e) {e.printStackTrace();}return null;}else {PrintWriter out;try {out = response.getWriter();out.write("文件不存在");out.flush();out.close();} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}return null;}}
}

FileController.java

package com.sxt.controller;import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;import javax.servlet.http.HttpServletResponse;import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;import com.sxt.utils.AppFileUtils;
import com.sxt.utils.RandomUtils;@Controller
@RequestMapping("file")
public class FileController {/*** 文件上传* 上传一个文件保存到E://upload* @throws IOException */@RequestMapping("upload")@ResponseBodypublic  Map<String,Object>  upload03(MultipartFile mf) throws IOException {System.out.println(mf);System.out.println(mf.getContentType());//文件的类型System.out.println(mf.getName());//表单的name属性值System.out.println(mf.getOriginalFilename());//文件名System.out.println(mf.getSize());//文件大小System.out.println(mf.getInputStream());//文件流//文件上传的父目录String parentPath=AppFileUtils.PATH;//得到当前日期作为文件夹名称String dirName=RandomUtils.getCurrentDateForString();//构造文件夹对象File dirFile=new File(parentPath,dirName);if(!dirFile.exists()) {dirFile.mkdirs();//创建文件夹}//得到文件原名String oldName=mf.getOriginalFilename();//根据文件原名得到新名String newName=RandomUtils.createFileNameUseTime(oldName);File dest=new File(dirFile,newName);mf.transferTo(dest);Map<String,Object> map=new HashMap<>();map.put("code", 0);map.put("msg", "");Map<String,Object> data=new HashMap<>();data.put("src", "file/downloadFile.action?path="+dirName+"/"+newName);map.put("data", data);return map;}/*** 下载的方法*/@RequestMapping("downloadFile")public ResponseEntity<Object> downloadFile(String path,HttpServletResponse response){//3,拿到文件的老名字return AppFileUtils.downloadFile(response, path, "");}}

文件上传——选择文件之后自动上传||文件上传的后端代码相关推荐

matlab文件批量命名,利用MATLAB批量对文件重命名
利用MATLAB批量对文件重命名 tags: MATLAB 科研软件序窃·格瓦拉没paper,实验肯定要做啊,不做就毕不了业 . 编程这方面,编程是不可能编程的,这辈子不可能编程的 . pape ...
html js引入位置,JavaScript | 文件引入位置的讲究，在文件头部和尾部哪里引入JS文件更好？...
JS放在文件头部还是尾部 HTML5学堂:JavaScript文件的引入方式与CSS引入方式类似,但是外引的JS文件可以放置在html文件的任意地方,JS文件放置在头部或者底部有何不同呢?或者说,放置 ...
linux 的pwd文件被删,恢复被删除的文件-linux篇
本文转自IBM中国上的文档 [http://www.ibm.com/developerworks/cn/linux/l-cn-filesrc/] [http://www.ibm.com/develop ...
c#如何通过ftp上传文件_ftp自动上传工具，ftp自动上传工具如何自动上传文件
不知道大家用过ftp自动上传文件的ftp上传工具吗?小编到现在为止也只用过一款ftp上传工具是具有定时功能的.定时这个功能是真的很棒了,节省了很多时间而且还很方便快捷.ftp自动上传文件怎么上传?下面 ...
ftp上传当天文件的方法_ftp自动上传文件，ftp自动上传文件的配置方法及使用教程...
IIS7服务器管理工具具备所有服务器管理工具的功能,比如批量管理.同时它还有很多的自主研发功能.比如同步操作.到期提醒.数据安全和定期执行.当然适用的系统也有Windows和liunx操作系统.还支持 ...
c#如何通过ftp上传文件_ftp自动上传文件，如何设置ftp自动上传文件及环境配置...
IIS7服务器管理工具-FTP客户端作为FTP客户端,它支持批量管理FTP站点具体功能: FTP定时上传和定时下载,FTP定时备份,且操作简洁 iis7服务器管理工具还是vnc客户端支持批量管理 ...
ewebeditor在上传文件时，总是提示“请选择一个有效的文件”，
用ewebeditor在上传文件时,总是提示"请选择一个有效的文件",可我上传的文件格式明明是正确的,而且在XP上测试时一切正常啊,难道是程序有问题?经过研究终于找到了问题所在. ...
html选择文件上传ajax,使用HTML5实现文件上传(ajax方式)以及进度显示
String path = request.getContextPath(); %> 使用XMLHttpRequest上传文件 var xhr =new XMLHttpRequest(); // ...
[html] input上传文件可以同时选择多张吗？怎么设置？
[html] input上传文件可以同时选择多张吗?怎么设置? <input type="file" multiple /> 个人简介我是歌谣,欢迎和大家一起交流前后 ...

文件上传——选择文件之后自动上传||文件上传的后端代码

选择文件之后自动上传

非自动上传

文件上传的后端代码

RandomUtils.java

AppFileUtils.java

FileController.java

文件上传——选择文件之后自动上传||文件上传的后端代码相关推荐

最新文章

热门文章