How to upload file using jQuery/Ajax?
The following AJAX File Upload jQuery Tutorial covers how to upload files asynchronously using jQuery Framework.
Generic Handler: AjaxFileUploader.ashx
- public class AjaxFileUploader : IHttpHandler
- {
- public void ProcessRequest(HttpContext context)
- {
- if (context.Request.Files.Count > 0)
- {
- string path = context.Server.MapPath("~/Files");
- if (!Directory.Exists(path))
- Directory.CreateDirectory(path);
- var file = context.Request.Files[0];
- string fileName;
- if (HttpContext.Current.Request.Browser.Browser.ToUpper() == "IE")
- {
- string[] files = file.FileName.Split(new char[] { '\\' });
- fileName = files[files.Length - 1];
- }
- else
- {
- fileName = file.FileName;
- }
- string strFileName = fileName;
- fileName = Path.Combine(path, fileName);
- file.SaveAs(fileName);
- string msg = "{";
- msg += string.Format("error:'{0}',\n", string.Empty);
- msg += string.Format("msg:'{0}',\n", strFileName);
- msg += string.Format("path:'{0}'", path.Replace("\\", "?"));
- msg += "}";
- context.Response.Write(msg);
- }
- }
- public bool IsReusable
- {
- get
- {
- return true;
- }
- }
- }
HTML:
- <div class="resumeUpload">
- <input type="file" id="fileToUpload" name="fileToUpload" onchange="ajaxFileUpload();" />
- <div class="fileBtn">
- <span>File</span>
- <input id="fileUploadBox" disabled="disabled" value="@GetDictionary("No files selected")" />
- </div>
- </div>
jQuery:
- <script type="text/javascript">
- function ajaxFileUpload() {
- $("#fileToUpload").ajaxStart(function () {
- $('#fileUploadBox').val('Uploading...');
- $('#fileUploadBox').addClass('loadinggif');
- }).ajaxComplete(function () {
- $('#fileUploadBox').removeClass('loadinggif');
- });
- $.ajaxFileUpload({
- url: '/GenericHandlers/AjaxFileUploader.ashx',
- secureuri: false,
- fileElementId: 'fileToUpload',
- dataType: 'json',
- data: { name: 'logan', id: 'id' },
- success: function (data, status) {
- if (typeof (data.error) != 'undefined') {
- if (data.error != '') {
- //alert(data.error);
- } else {
- $('#fileUploadBox').val(data.msg);
- $("#hdnFilePath").val(data.path + "?" + data.msg);
- }
- }
- },
- error: function (data, status, e) {
- //alert(e);
- $('#fileUploadBox').val('File size is too large.');
- }
- });
- $.extend({
- handleError: function (s, xhr, status, e) {
- if (s.error)
- s.error(xhr, status, e);
- else if (xhr.responseText)
- console.log(xhr.responseText);
- }
- });
- return false;
- }
- </script>
How to Remove the white spaces at the start and end of the string?
The $.trim() function removes all newlines, spaces (including non-breaking spaces), and tabs from the beginning and end of the supplied string. If these whitespace characters occur in the middle of the string, they are preserved.
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>jQuery.trim demo</title>
- <script src="//code.jquery.com/jquery-1.10.2.js"></script>
- </head>
- <body>
- <pre id="original"></pre>
- <pre id="trimmed"></pre>
- <script>
- var str = " lots of spaces before and after ";
- $( "#original" ).html( "Original String: '" + str +"'");
- $( "#trimmed" ).html( "Trimmed String: '" + $.trim(str) +"'");
- </script>
- </body>
- </html>
How to Limit the number of characters allowed in form input text field?
By using the following attribute we can easily limit the number of characters allowed in form input text field.
maxlength="10"Adding this attribute to your control:
<input type="text"
id="txtPhone"
name="Phone"
maxlength="10" />
How to get the Created & last Published date of a Node in Umbraco?
Using the following CSHTML code we can easily get the Created & last Published date of a Node in Umbraco.
To get the Created Date of an Umbraco Node:
To get the Created Date of an Umbraco Node:
- @Model.CreateDate
- @Model.UpdateDate
How to get the value of a CSS property using jQuery?
Consider the following HTML:
- <div id="jjTechSol" style="height: 50px;width: 50px;">
- <p>Content</p>
- </div>
- <script type="text/javascript">
- $(document).ready(function () {
alert('Height:'+$("#jjTechSol").css('height')); - alert('Width:'+$("#jjTechSol").css('width'));
}); - </script>
propertyName
Type: String
A CSS property.
How to Compare two fields with jQuery validate plugin?
Consider the following HTML.
- <input type="text" id="txtEmail" name="Email" />
- <input type="text" id="txtConfirmEmail" name="ConfirmEmail" />
- $('#myform').validate({
- rules: {
- Email: { required: true },
- ConfirmEmail: { equalTo: '#txtEmail' }
- }
- });
How to convert the first character of a string into upper case?
The following C# code is used to convert the first character of a string into upper case.
- static string UppercaseFirst(string s)
- {
- // Check for empty string.
- if (string.IsNullOrEmpty(s))
- {
- return string.Empty;
- }
- // Return char and concat substring.
- return char.ToUpper(s[0]) + s.Substring(1);
- }
