上传图片回显(上传到服务器)

No.1 :首先,在pom文件中导入依赖:

<!--文件上传 --><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.2</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.4</version></dependency><dependency><groupId>commons-logging</groupId><artifactId>commons-logging</artifactId><version>1.2</version></dependency>

No.2 :在SpringMVC.xml中配置,对文件上传进行解析:

 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><!--文件上传大小--><property name="maxUploadSize" value="10240000"/><!--设置字符编码格式--><property name="defaultEncoding" value="utf-8"/></bean>

No.3 :在前段页面写页面上传:

<form enctype="multipart/form-data" id="form">文件<input type="file" id="file" name="file" onchange="upload()">
</form>
<img id="img" src="" alt="美图">
<script type="text/javascript" src="/Js/jquery.js"></script>
<script>// 开始上传function upload() {// 获得表单对象var formData = new FormData($("#form")[0]);// 异步上传$.ajax({url:"http://localhost:8080/ajax/upload.do",type:"post",data:formData,async:false,cache:false,contentType:false,processData:false,success:function (data) {if (data.code == 200) {$("#img").attr("src",data.data);}else{alert("上传失败1");}},error:function () {alert("上传失败2");}});}
</script>

No.4 :在后台进行文件上传,返回路径

@RequestMapping("/upload")
@ResponseBody
public ResultObject upload(HttpServletRequest request) throws IOException {// 将请求强转为[多部件请求对象]MultipartHttpServletRequest mhReq = (MultipartHttpServletRequest) request;// 获得文件对象,此处要与前端页面的name属性值保持一致MultipartFile file = mhReq.getFile("file");String filename = this.createFileName(file.getOriginalFilename( ));System.out.println("文件名: "+filename );// 上传至服务器路径ServletContext servletContext = request.getServletContext( );// 获得文件在服务器的项目上的真实路径String realPath = servletContext.getRealPath("/upload");File parent = new File(realPath);if (!parent.exists()) {parent.mkdir();}File targetFile = new File(parent,filename);// 开始上传file.transferTo(targetFile);System.out.println("上传完毕" );return new ResultObject(200,"成功","/upload/"+filename);
}public String createFileName(String oldname) {// 获得老文件的后缀String[] split = oldname.split("\\.");String suffix = split[1];// 生成随机数:方案1: 当前时间毫秒值// long time = new Date( ).getTime( );// String newfilename = time+"."+suffix;// 方案二: 生成随机数String uuid = UUID.randomUUID( ).toString( );return uuid+"."+suffix;
}

No.5 :最后测试即可

上传图片回显(上传到服务器)相关推荐

后台系统上传文件回显上传进度条
2019独角兽企业重金招聘Python工程师标准>>> 大家有必要看到文末 xhr传统的AJAX传输对象,在做后台系统的时候经常遇到文件上传的情景,以往的xhr已经能够应对文件表 ...
基于vue element-ui 封装上传图片组件功能:上传,删除,预览,上传图片水印,拖拽排序,上传进度条等
学习目标: 我们在开发后台时肯定避免不了上传图片的功能例如: 上传图片回显上传完成 : 预览查看 , 删除等如果是图片列表,还可能让你拖动图片排序有的后台项目可能要给图片添加水印,添加标记有 ...
u3d文件上传至服务器,unity 上传图片到云服务器
unity 上传图片到云服务器内容精选换一换用户可以采用加密方式创建私有镜像,确保镜像数据安全性.用户已启用数据加密服务.加密镜像不能共享给其他用户.加密镜像不能发布到应用超市.如果云服务器的系 ...
画世界上传图片提交到服务器_【MUI】选择图片并上传至服务器
最后更新17.01.20 一.首先这是HTML的代码将要显示一张图片二.然后这是JavaScript代码 var img_my = document.getElementById('my_img_ ...
c语言上传图片至服务器,JSP+Servlet实现文件上传到服务器功能
本文实例为大家分享了JSP+Servlet实现文件上传到服务器功能的具体代码,供大家参考,具体内容如下项目目录结构大致如下: 正如我在上图红线画的三个东西:Dao.service.servlet 这 ...
Java实现图片上传到服务器
Java实现图片上传到服务器 #这几天研究图片上传到服务器并回显到页面遇到了问题,在这里总结一下!希望对各位有用!!! 先上代码 jsp代码: <form id="myform&quo ...
asp.net ftp上传文件到服务器,.net 文件上传到服务器上
详解 Linux 下 SSH 远程文件传输命令 scp 3.将本地文件上传到服务器上 scp-P 2222/home/lnmp0.4.tar.gz root@www.vpser.net:/root/l ...
手机上传日志文件给服务器,手机内容远程上传到服务器
手机内容远程上传到服务器内容精选换一换为加强对系统数据的容灾管理,云堡垒机支持配置日志备份,提高审计数据安全性和系统可扩展性.本小节主要介绍如何在系统配置OBS桶参数,将日志远程备份至OBS桶. ...
app文件上传到服务器教程,app上传文件到云服务器
app上传文件到云服务器内容精选换一换本节操作以CentOS操作系统为例,介绍配置SFTP.使用SFTP上传或下载文件.文件夹的操作步骤.以root用户登录云服务器.执行以下命令查看ssh版本, ...

上传图片回显(上传到服务器)

上传图片回显(上传到服务器)相关推荐

最新文章

热门文章