I have tried to upload files to folder using jquery ajax file upload script in asp.net. I show custom file upload image instead file upload control. This method working fine in firefox and chrome. But in IE it is not working. My code is below:
<img src="Images/attach.png" title="Add Attachment" style="vertical-align: middle; height:24px;cursor:pointer; " onclick="document.getElementById('fileToUpload').click();" id="attach" alt=""/> <img src="images/ajax-loader.gif" style="height:24px;vertical-align: middle;display:none;" id="noteloading" alt=""/> <asp:FileUpload ID="fileToUpload" runat="server" style="display:none;" ClientIDMode="Static" onchange="getFileName()" />
<input type="button" value="Submit" onclick="ajaxFileUpload()" />
Script:
function ajaxFileUpload()
{
var fileName = $('#<%=fileToUpload.ClientID %>').val().replace(/.*(\/|\\)/, '');
var user = '<%= User.Identity.Name%>';
$('#NotesStatus').val('');
$(obj).hide();
if (fileName != "" && fileName != null) {
$.ajaxFileUpload({ url: 'AjaxFileUploader.ashx',
secureuri: false,
fileElementId: 'fileToUpload',
dataType: 'json',
success: function (data, status) {
if (typeof (data.error) != 'undefined') {
if (data.error != '') {
alert(data.error);
} else {
SaveNotesData(entryId, formId, user, action, comments, actDate, relatedData, data.msg);
}
}
},
error: function (data, status, e) {
alert(e);
alert('hai');
}
});
}
else {
SaveNotesData(entryId, formId, user, action, comments, actDate, relatedData, fileName);
}
}
function SaveNotesData(entryId, formId, user, action, comments, actDate, relatedData, fileName)
{
$.ajax({ url: "AjaxService.asmx/AddEntryNotes", contentType: "application/json; charset=utf-8", type: "POST",
data: '{"entryid":' + entryId + ', "frmid":"' + formId + '","user":"<%= User.Identity.Name%>","action":"' + action + '","comments":"' + comments + '","actDate":"' + actDate + '", "relatedData":"'+relatedData+'", "fileName":"' + fileName + '"}',
success: function (result) { $('#imgprogressing').hide();
if (result == null || result.d == null) return;
if (result.d == "true")
{
$('#NotesStatus').append("Notes Added Successfully");
$('.usernotes').load("NotesPopup.aspx?formId=" + encodeURI(formId) + "&entryId=" + encodeURI(entryId) + "&uid="+(new Date()).getTime());
$('.toolTip').each(function (index) {
attachNotes($(this).attr("entryid"), $(this).attr("frm"), $(this));
});
$('#<%=divAddNote.ClientID %>').dialog('close');
}
else
{
alert("Failure in Notes Addition !");
}
//getNotes(entryId, formId, $('.usernotes'));
//HideNotesPopup();
document.getElementById('hlNoteSubmit').style.visibility = 'visible';
$('#NotesStatus').html(''); $('#<%=taComments.ClientID %>').val('');
$('#<%= actionDate.ClientID %>').val($.datepicker.formatDate('m/d/yy', new Date()));
},
error: function (XMLHttpRequest, textStatus, errorThrown) { $('#imgprogressing').hide(); alert('Loading failed!!'); }
});
}
AjaxFileUploader.ashx:
if (context.Request.Files.Count > 0)
{
string path = context.Server.MapPath("~/Uploads");
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 newFilename = Guid.NewGuid().ToString();
FileInfo fInfo = new FileInfo(fileName);
newFilename = string.Format("{0}{1}", newFilename, fInfo.Extension);
string strFileName = newFilename;
fileName = Path.Combine(path, newFilename);
file.SaveAs(fileName);
string msg = "{";
msg += string.Format("error:'{0}',\n", string.Empty);
msg += string.Format("msg:'{0}'\n", strFileName);
msg += "}";
context.Response.Write(msg);
}
When I show file upload control and browse through file upload control, It is working in ie without problem. Instead of when I set filupload control display none and trigger fileupload click through custom image click not all working in ie. But working well in firefox and chrome.How to solve that?
