ssh框架下使用dropzone.js上傳圖片

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


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章