dropzone.js是一个文件异步上传组件,对服务器端的支持是通过
普通的html文件上传表单实现的
首先在jsp页面添加dropzone.js支持:
<
div
id
=
"dropzone"
>
<
form
action
=
"
<%=
path
%>
/imageUpload"
class
=
"dropzone"
enctype
=
"multipart/form-data"
>
<
div
class
=
"fallback"
>
<input name= "file" type="file" multiple= "" /> //普通的html文件上传表单,文件类型是file,name属性用于action的属性 //注入,即imageUpload action中存在一个属性叫做“file”,保存文件内容
</
div
>
</
form
>
</
div
>
<
script
src
=
"./js/dropzone.min.js"
></
script
>
<
script
type
=
"text/javascript"
>
jQuery(
function
($) {
try
{
$(
".dropzone"
)
.dropzone(
{
paramName :
"file"
,
// 与input的name属性一致
maxFilesize : 5,
// MB
maxFiles : 10,
acceptedFiles :
".jpg,.png,.gif,.bmp,.jpeg,.JPG,.PNG,.GIF,.BMP,.JPEG"
,
addRemoveLinks :
true
,
dictResponseError :
'Error while uploading file!'
,
});
}
catch
(e) {
alert(
'Dropzone.js does not support older browsers!'
);
}
});
</
script
>
dropzone.js中,只要选择一个图片则自动上传,若要达到选择完所有图片再上传到服务器的效果,可以通过修改js文件来实现。详见
此链接。
在struts下配置文件的图片上传保存路径,
savePath参数表示文件上传的路径(该路径一定要先建立好,必须存在)
<
action
name
=
"imageUpload"
class
=
"imageUploadAction"
>
<
param
name
=
"savePath"
>
/uploadFiles
</
param
> //
<
result
name
=
"error"
>
index.jsp
</
result
>
</
action
>
action类的实现:
public
class
ImageUploadAction
extends
ActionSupport
{
private
File
file
; //input表单中传递过来的文件,命名与input的name属性一致
private
String
fileFileName
; //
保存传递过来的文件名称,该
属性命名方式:input的name属性+FileName,
private
String
fileContentType
; //文件内容类型
……省略getter和setter。
@Override
public
String execute()
throws
Exception {
String id = UUID. randomUUID().toString();
String imagepath = ServletActionContext.getServletContext()
.getRealPath(
"/uploadFiles"
) //获取上传文件夹的绝对路径
+
"\\"
+ id
+
this
.getFileFileName();
//将file中的内容保存到设置的上传文件夹下
File file1 =
new
File(imagepath);
FileOutputStream fos =
new
FileOutputStream(file1);
FileInputStream fis =
new
FileInputStream(
this
.getFile());
byte
[] buffer =
new
byte
[1024];
int
len = 0;
while
((len = fis.read(buffer)) != -1) {
fos.write(buffer, 0, len);
}
fos.close();
fis.close();
return
ERROR
;
}