Is it possible to upload a (pdf) file using HTML5 + Ajax + jQuery + C# ?
I need to upload a file w/o reloading the page.
As I'm not a web developer, please 'keep it simple' answering the question.:)
1
-
Yes, you can! Plenty of AJAX upload tutorials out there! stackoverflow.com/questions/336446/…tymeJV– tymeJV2014-02-12 14:03:35 +00:00Commented Feb 12, 2014 at 14:03
Add a comment
|
2 Answers
With jquery.form plugin, it's very simple to do what you want:
HTML:
<form id="form" action="upload_page.php" method="post" enctype="multipart/form-data">
<input type="file" size="60" name="file">
<input type="submit" value="Upload file">
</form>
<div id="progress">
<div id="bar"></div>
<div id="percent">0%</div >
</div>
JS:
$(document).ready(function () {
var options = {
beforeSend: function () {
$("#progress").show();
//clear everything
$("#bar").width('0%');
$("#message").html("");
$("#percent").html("0%");
},
uploadProgress: function (event, position, total, percentComplete) {
$("#bar").width(percentComplete + '%');
$("#percent").html(percentComplete + '%');
},
success: function () {
$("#bar").width('100%');
$("#percent").html('100%');
},
complete: function (response) {
$("#message").html("<font color='green'>" + response.responseText + "</font>");
},
error: function () {
$("#message").html("<font color='red'> ERROR: unable to upload files</font>");
}
};
$("#form").ajaxForm(options);
});
This will also give you a nice progress bar which you can style however you want.
answered Feb 12, 2014 at 14:06
display-name-is-missing
4,4055 gold badges31 silver badges42 bronze badges
7 Comments
Andrew
Forgot to mention that the file to upload is chosen by user and I can only use Javascript / jQuery, can't change the .cshtml file.
Andrew
How do I handle the submission on the server side (using C#) ?
display-name-is-missing
@AndrejsIgumenovs I'm sorry, but I can't answer on that. Don't know any C#, but do you not know how to handle submission in general or does the file simply not reach the file handling page?
Andrew
Example: $.get("/.../CallbackMethod/", [parameters], function (json) {...}, "json");
Andrew
Uncaught TypeError: Object [object Object] has no method 'ajaxForm'
|
We have a ASP.NET uploader written in c#+ajax in our GPL package which you can find here:
Comments
