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);
}
-
What exactly you want.Do you want to show the uploaded file detail in the same page ? Just like
gmailshows 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
2 Answers
Reset to default 0If 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.