如何使用jQuery将多个文件上传到Java控制器

Question

Hy all,

i am trying to create a workaround because of a jersey bug. The jersey truncating the slashes from filename. So i would like to send my files up by another way. For 1 file i found a solution, this:

function extractFilename(s){ 
  // returns string containing everything from the end of the string 
  //   that is not a back/forward slash or an empty string on error
  //   so one can check if return_value===''
  return (typeof s==='string' && (s=s.match(/[^\\\/]+$/)) && s[0]) || '';
} 
<input type="file" onchange="alert(extractFilename(this.value));">

but with multiple files it does not work. I tried to send them up via post: UI:

<input type="file" id="files" name="files" multiple="multiple" />

JS:

function showUploadPanel() {

            var files = $("#files")[0].files;
       var form = createFormWithInputs("/user/document_upload/", files);

             form.appendTo( document.body ).submit();
         }

function createFormWithInputs(path, params) {
            var form = $(document.createElement( "form" ))
                .attr( {"method": "post", "action": path} );

            $.each( params, function(key,value){
                $.each( value instanceof Array? value : [value], 
                 function(i,val){
                    $(document.createElement("input"))
                        .attr({ "type": "hidden", "name": "files", "value": 
                        val })
                        .appendTo( form );
                }); 
            }); 

            return form;
        }

Controller:

  @POST
  @Path("/document_upload")
  @Consumes(MediaType.APPLICATION_FORM_URLENCODED)
  public Response documentUpload(@FormParam("files") List<File> files) {

I can have the files but they are empty '[object File]'. There is no any content.

What do i do worng?

Thank you in advance, Endre

Answer 1

You can try using Jquery plugin uploadify inorder to upload multiple file . http://www.uploadify.com/demos/