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;
}