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 ;

     }