文件上传
文件上传
1.先在pom导入jar包Apache commons FileUpload文件
<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload --> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.3</version> </dependency>
2.在SpringMVC的配置文件中写一个CommonsMultipartResolver配置,id必须为multipartResolver.
<!-- springMVC可以处理文件上传 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> </bean>
3.写一个类，调用DefaultMultipartHttpServletRequest类方法
package com.action;
import java.io.File;
import java.io.IOException;
import java.util.Iterator;
import javax.servlet.http.HttpServletRequest;
import org.aspectj.weaver.Iterators;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartResolver;
import org.springframework.web.multipart.support.DefaultMultipartHttpServletRequest;
@Controller
public class FileUploadAction {
@Autowired
private HttpServletRequest request;
public String upload(DefaultMultipartHttpServletRequest requestfile) throws Exception, IOException{
Iterator<String> it=requestfile.getFileNames();
if(it.hasNext()==false){
return "";
}
MultipartFile images=requestfile.getFile(it.next());
// 如果不存在temps文件就创建
String temps=request.getServletContext().getRealPath("\temps");
File file=new File(temps);
if(file.exists()==false){
file.mkdir();
}
// 把文件存在temps文件夹中
String oldFilename=images.getOriginalFilename();
int index=oldFilename.lastIndexOf(".");
String ext=oldFilename.substring(index);
String newfile=System.currentTimeMillis()+ext;
images.transferTo(new File(temps+File.separator+newfile));
return newfile;
}
}
4.在web.xml中配置中文处理过滤器
<!-- 中文处理过滤器 -->
<filter>
<filter-name>ChineseFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>utf-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>ChineseFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
5.在form表单页面上要写
<from action="${pagecontext.request.contextpath}/upload" method="post" enctype="muiltipart/form-data">
<input type="file" name="images"/>
6.在页面上输入映射路径
localhost:8080/upload/index.jsp
*****文件上传之上传编辑器webupload+ueditor+ssm
1.导入pom文件
<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload --> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.3</version> </dependency> <!-- 文本编辑器 --> <!-- https://mvnrepository.com/artifact/com.gitee.qdbp.thirdparty/ueditor --> <dependency> <groupId>com.gitee.qdbp.thirdparty</groupId> <artifactId>ueditor</artifactId> <version>1.4.3.3</version> </dependency>
2.同样的要在spring-servlet中配置muiltipartResolver
<!-- springMVC可以处理文件上传 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> </bean>
3. 编写studentAction
package com.action;
import javax.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import com.util.FileCopy;
@Controller
public class StudentAction {
@Autowired
private HttpServletRequest request;
@RequestMapping("/addStudent")
public String addStudent(String name, String filename, String jianli)
{
System.out.println("姓名:"+name);
System.out.println("文件名:"+filename);
System.out.println("简历:"+jianli);
//复制tmp到images
FileCopy.copy(request, "/temp","/images",filename);
//写OSS
return "success";
}
}
4.在网上下载webuploader-0.1.5，和ueditor1_4_3_3-utf8-jsp放到WEB-INF下面的一个js目录下
5.编写一个JSP页面
1.需要导入一些webupload里面的js和editor的js
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/webuploader-0.1.5/webuploader.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/webuploader-0.1.5/webuploader.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/ueditor1_4_3_3-utf8-jsp/utf8-jsp/ueditor.config.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/ueditor1_4_3_3-utf8-jsp/utf8-jsp/ueditor.all.min.js"></script>
2.写一个form表单
<form> 姓名:<input type=text name="name" id="name"/> <br> 玉照: <!--dom结构部分--> <div id="uploader-demo"> <!--用来存放item--> <div id="fileList" class="uploader-list"></div> <div id="filePicker">选择图片</div> </div> 简历: <script id="jianli" type="text/javascript"></script> <br> <button id="btnAdd" type="button">上传</button> </form>
3.在script里面写一些editor和webupload初始化代码
<script>
//初始化编辑器
var ue = UE.getEditor('jianli');
var filename = null;
$("#btnAdd").click(function(){
var name = $("#name").val();
var jianli = ue.getContent();
var url = "${pageContext.request.contextPath}/addStudent";
var data = {name:name,jianli:jianli,filename:filename};
var callback = function(data)
{
}
$.post(url,data,callback);
});
// 初始化Web Uploader
var $list = $("#fileList");
var thumbnailWidth = 200;
var thumbnailHeight = 200;
var uploader = WebUploader.create({
// 选完文件后，是否自动上传。
auto: true,
// swf文件路径
swf: '/js/Uploader.swf',
// 文件接收服务端。
server: '${pageContext.request.contextPath}/upload',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#filePicker',
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
部分的js代码
// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) {
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail">' +
'<img>' +
'<div class="info">' + file.name + '</div>' +
'</div>'
),
$img = $li.find('img');
// $list为容器jQuery实例
$list.append( $li );
// 创建缩略图
// 如果为非图片文件，可以不用调用此方法。
// thumbnailWidth x thumbnailHeight 为 100 x 100
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr( 'src', src );
}, thumbnailWidth, thumbnailHeight );
});
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on( 'uploadSuccess', function( file, response ) {
filename = response._raw ; //预览上传后的文件名
$( '#'+file.id ).addClass('upload-state-done');
});
// 文件上传失败，显示上传出错。
uploader.on( 'uploadError', function( file ) {
var $li = $( '#'+file.id ),
$error = $li.find('div.error');
// 避免重复创建
if ( !$error.length ) {
$error = $('<div class="error"></div>').appendTo( $li );
}
$error.text('上传失败');
});
5.写一个util类
package com.util;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import javax.servlet.http.HttpServletRequest;
public class FileCopy {
/**
*
* @param request
* @param srcDir 源目录
* @param desDir 目的目录
* @param oldFile 源文件名
* @return
*/
public static boolean copy(HttpServletRequest request, String srcDir,
String desDir, String oldFile) {
try {
String realSrcDir = request.getSession().getServletContext()
.getRealPath(srcDir);
String realDesDir = request.getSession().getServletContext()
.getRealPath(desDir);
InputStream is = new FileInputStream(realSrcDir + "/" + oldFile);
OutputStream os = new FileOutputStream(realDesDir + "/" + oldFile);
byte[] b = new byte[10240];
int size = is.read(b);
while (size > 0) {
os.write(b, 0, size);
size = is.read(b);
}
os.close();
is.close();
return true;
} catch (Exception e) {
e.printStackTrace();
}
return false;
}
}
6.最后部署到tomcat访问http://localhost:8080//ht-fileupload/
