admin管理员组

文章数量:1401797

I am trying to make an upload page which takes file to upload. I am using Spring framework here my query is on Upload button I am calling a JavaScript method which should send my file to controller using jQuery AJAX. Is there any way to pass this through JavaScript?

Following is the code which I am trying.

<body>
    <div style="text-align: center; margin-top: 60px;">
        <form enctype="multipart/form-data">
            Select file:
            <input type="file" name="dataFile" id="fileAttachment"/><br/><br/>
                <div style="text-align: center; margin-top: 100px;">
                    <input style="cursor: pointer;" onmouseover="" onclick="uploadAttachment()" class="dialogbox" type="submit" value="Upload Report" />
                </div>
        </form>
    </div>
</body>

JS:

<script language="Javascript">
function uploadAttachment(){
    var Name = jQuery('#Name option:selected').text();
    jQuery.post('upload',{Name:Name}
    function(data){
    if(data==1)
    alert("success");
    else
    alert("failed");
    });
}
    </script>

on controller.java page following is the code written

@RequestMapping(value = "upload", method=RequestMethod.POST)
        public @ResponseBody String upload(HttpServletRequest request, HttpServletResponse response,
@RequestParam("Name") String Name){
System.out.println(Name);
}

I am trying to make an upload page which takes file to upload. I am using Spring framework here my query is on Upload button I am calling a JavaScript method which should send my file to controller using jQuery AJAX. Is there any way to pass this through JavaScript?

Following is the code which I am trying.

<body>
    <div style="text-align: center; margin-top: 60px;">
        <form enctype="multipart/form-data">
            Select file:
            <input type="file" name="dataFile" id="fileAttachment"/><br/><br/>
                <div style="text-align: center; margin-top: 100px;">
                    <input style="cursor: pointer;" onmouseover="" onclick="uploadAttachment()" class="dialogbox" type="submit" value="Upload Report" />
                </div>
        </form>
    </div>
</body>

JS:

<script language="Javascript">
function uploadAttachment(){
    var Name = jQuery('#Name option:selected').text();
    jQuery.post('upload',{Name:Name}
    function(data){
    if(data==1)
    alert("success");
    else
    alert("failed");
    });
}
    </script>

on controller.java page following is the code written

@RequestMapping(value = "upload", method=RequestMethod.POST)
        public @ResponseBody String upload(HttpServletRequest request, HttpServletResponse response,
@RequestParam("Name") String Name){
System.out.println(Name);
}
  • java
  • javascript
  • jquery
Share Improve this question edited Dec 4, 2014 at 17:50 Maniero 11.2k7 gold badges44 silver badges91 bronze badges asked Feb 24, 2014 at 11:02 b22b22 3036 gold badges10 silver badges23 bronze badges 4
  • What exactly you want.Do you want to show the uploaded file detail in the same page ? Just like gmail shows the attachment details ? – Human Being Commented Feb 24, 2014 at 11:56
  • 1 i just want to send the file selected for upload to controller via Jquery.post() – b22 Commented Feb 24, 2014 at 12:03
  • 1 Can you post your controller code ? – Human Being Commented Feb 24, 2014 at 12:31
  • @HumanBeing : above i pasted the example of my controller where i am sending String object to controller, now is there any way to send file object to controller ? – b22 Commented Feb 25, 2014 at 11:35
Add a ment  | 

2 Answers 2

Reset to default 0

If you are in fact seeking a pure javascript way to upload an image/file, then the following tutorial from 2009 will tell you exactly how to do that:

http://igstan.ro/posts/2009-01-11-ajax-file-upload-with-pure-javascript.html

I ran into this when I wanted to add basic-authentication to a form submission, without enabling cookies. E.g. when you have username/password fields with your filename, file, etc fields.

Hope this helps!

I think you can try the following code to upload file with javascript.

function uploadAttachment(){
  $('#fileAttachment').trigger('click');

  if (typeof timer != 'undefined') {
      clearInterval(timer);
  }

  timer = setInterval(function() {
      if ($('#fileAttachment').val() != '') {
          clearInterval(timer);

          $.ajax({
              url: 'YOUR_UPLOAD_URL',
              type: 'post',
              dataType: 'json',
              data: new FormData($('#fileAttachment').closest('form')[0]),
              cache: false,
              contentType: false,
              processData: false,
              success: function(response){
              }
          });
      }
  }, 500);
}

You need to replace YOUR_UPLOAD_URL with your server upload URL.

本文标签： javaHow to send file using javascriptStack Overflow

版权声明：本文标题：java - How to send file using javascript - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744256831a2597521.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。