我创建了一个ajax上传文件，我有一些简单的问题，我有回调，允许你检查文件大小，文件格式，进度，上传完成和启动时间。现在问题在于文件完成了。当上传开始时，Ajax gif图像加载器显示为$（xxx）.show（）然后显而易见的是上传完成时我希望Ajax gif图像加载器隐藏$（xxx）.hide（）但是在Mozilla中选择器是不工作隐藏Ajax gif图像加载器但在IE中工作，非常奇怪。下面的代码是使用.NET模块处理上传请求的JQuery Ajax Upload的完整源代码。
Imports System.Web.UI.WebControls
Imports System.Web.UI
Imports System.Web
Imports System.Web.UI.HtmlControls
Imports API.HTML.Controls
Imports System.IO
Public Class JQueryFileUploadModule
Implements IHttpModule
Public Sub Dispose() Implements System.Web.IHttpModule.Dispose
End Sub
Public Sub Init(ByVal context As System.Web.HttpApplication) Implements System.Web.IHttpModule.Init
AddHandler context.BeginRequest, AddressOf OnBeginRequest
End Sub
Public Sub OnBeginRequest(ByVal sender As Object, ByVal e As EventArgs)
Dim httpApplication As HttpApplication = CType(sender, HttpApplication)
Dim contextPage As HttpContext = CType(sender, HttpApplication).Context
If contextPage.Request.QueryString("request") IsNot Nothing Then
If contextPage.Request.QueryString("request") = "getfilesize" Then
Dim fileNameQuesryString As String = contextPage.Request.QueryString("file")
Dim count As Integer = 0
If contextPage.Request.Files.Count > 0 AndAlso contextPage.Request.Files(0).FileName <> "" Then
Dim httpPostedFile As HttpPostedFile = contextPage.Request.Files(0)
Dim contentLength As String = httpPostedFile.ContentLength.ToString
contentLength = CInt(contentLength) / 1024
Dim javascript As String = String.Empty
javascript += "$(document).ready(function() {" & Environment.NewLine
javascript += String.Format(" window.parent.$.fn.fileUpload.GetFileSize('{0}');", contentLength) & Environment.NewLine
javascript += "});" & Environment.NewLine
contextPage.Response.Clear()
contextPage.Response.Write(String.Format("<html><head><script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.min.js'></script><script type='text/javascript'>{0}</script></head><body></body></html>", javascript, contentLength))
contextPage.Response.End()
End If
ElseIf contextPage.Request.QueryString("request") = "savefile" Then
Dim fileNameQuesryString As String = contextPage.Request.QueryString("file")
Dim savePath As String = contextPage.Request.QueryString("savePath")
Dim httpPostedFile As HttpPostedFile = contextPage.Request.Files(0)
Dim contentLength As String = httpPostedFile.ContentLength.ToString
Dim folderPath As String = System.Web.HttpContext.Current.Server.MapPath(savePath & "/")
Dim directory As New DirectoryInfo(folderPath)
If Not directory.Exists Then
directory.Create()
End If
Dim remotePath As New FileInfo(folderPath & "/" & fileNameQuesryString)
Dim os As New System.IO.FileStream(remotePath.FullName, IO.FileMode.Create)
Dim inputStream As System.IO.Stream = HttpPostedFile.InputStream
Dim length = HttpPostedFile.ContentLength
Dim b(1) As Byte
Dim bb As Byte
While length > 0 AndAlso inputStream.Read(b, 0, b.Length) > -1
os.Write(b, 0, b.Length)
length -= b.Length
End While
os.Close()
os.Dispose()
ElseIf contextPage.Request.QueryString("request") = "fileprogress" Then
Dim fileNameQuesryString As String = contextPage.Request.QueryString("file")
Dim savePath As String = contextPage.Request.QueryString("savePath")
Dim remotePath As New FileInfo(System.Web.HttpContext.Current.Server.MapPath(savePath & "/" & fileNameQuesryString))
Dim fileSizeDone As Integer = 0
If remotePath.Exists Then
fileSizeDone = remotePath.Length
Else
End If
Dim javascript As String = String.Empty
javascript += "$(document).ready(function() {" & Environment.NewLine
javascript += String.Format(" window.parent.$.fn.fileUpload.SavingFile({0});", fileSizeDone / 1024) & Environment.NewLine
javascript += "});" & Environment.NewLine
contextPage.Response.Clear()
contextPage.Response.Write(String.Format("<html><head><script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.min.js'></script><script type='text/javascript'>{0}</script></head><body></body></html>", javascript))
contextPage.Response.End()
End If
End If
End Sub
End Class
(function($) {
$.fn.fileUpload = function(settings) {
var def = {
fileSizeLimit: 2048,
fileExtAllowed: '',
iframe: null,
fileFormatCheck: function() { },
fileSizeError: function() { },
fileProgress: function() { },
finish: function() { },
start: function() { },
savePath: '/'
}
var container = this;
var fileInputName = '';
var fileInputExt = '';
var fileLength = 0;
var formAction = $("form").attr("action");
settings = $.extend(def, settings);
iframe = $("<iframe id='fileupload' name='fileupload'/>");
$(iframe).css("display", "none");
$(iframe).insertAfter(this);
iframe2 = $("<iframe id='fileupload2' name='fileupload2'/>");
$(iframe2).css("display", "none");
$(iframe2).insertAfter(this);
var SubmitFormForFielSizeRequest = function(text) {
$("form").attr("enctype", "multipart/form-data");
$("form").attr("target", 'fileupload');
if (GetWindowURL().indexOf("?") != -1) {
$("form").attr("action", GetWindowURL() + '&request=getfilesize&file=' + text)
}
else {
$("form").attr("action", GetWindowURL() + '?request=getfilesize&file=' + text)
}
$("form").submit();
};
var SubmitFormForFileSaveProcess = function(text) {
$("form").attr("enctype", "multipart/form-data");
$("form").attr("target", 'fileupload');
if (GetWindowURL().indexOf("?") != -1) {
$("form").attr("action", GetWindowURL() + '&request=savefile&file=' + text + '&savepath=' + settings.savePath)
}
else {
$("form").attr("action", GetWindowURL() + '?request=savefile&file=' + text + '&savepath=' + settings.savePath)
}
$("form").submit();
};
var SubmitFormForFileProgressCheck = function(text) {
$("form").attr("enctype", "multipart/form-data");
$("form").attr("target", 'fileupload2');
if (GetWindowURL().indexOf("?") != -1) {
$("form").attr("action", GetWindowURL() + '&request=fileprogress&file=' + text + '&savepath=' + settings.savePath)
}
else {
$("form").attr("action", GetWindowURL() + '?request=fileprogress&file=' + text + '&savepath=' + settings.savePath)
}
$("form").submit();
};
var GetWindowURL = function() {
return window.location.href;
};
var GetFileName = function() {
var text = $(container).attr("value");
var fileName = '';
var splitText = text.split("\\");
if (splitText.length > 1) {
fileName = splitText[splitText.length - 1];
}
else {
fileName = text;
}
return fileName;
};
var GetFileExt = function() {
var fileExtSplit = GetFileName().split(".");
var fileExt = fileExtSplit[fileExtSplit.length - 1];
return fileExt;
};
$(this).change(function() {
if (settings.fileExtAllowed != GetFileExt()) {
settings.fileFormatCheck.call(this, GetFileExt());
}
else {
SubmitFormForFielSizeRequest(GetFileName());
}
});
$.fn.fileUpload.GetFileSize = function(size) {
if (size > settings.fileSizeLimit) {
$("form").attr("action", formAction);
settings.fileSizeError.call(this, size);
}
else {
fileLength = size;
SubmitFormForFileSaveProcess(GetFileName());
settings.start.call(this, GetFileName());
setTimeout(function() { $.fn.fileUpload.SavingFile(0); }, 2000);
}
}
$.fn.fileUpload.SavingFile = function(progress) {
var len = parseInt(fileLength).toFixed(0);
var prog = parseInt(progress).toFixed(0);
if (len <= prog) {
$("form").attr("enctype", "");
$("form").attr("action", formAction);
settings.finish.call(this, GetFileName());
}
else {
SubmitFormForFileProgressCheck(GetFileName());
this.SavingProgress(progress);
}
}
$.fn.fileUpload.SavingProgress = function(progress) {
settings.fileProgress.call(this, fileLength, progress);
}
}
})(jQuery);
$("#htmlinputfilecreateroom").fileUpload({ fileExtAllowed: 'jpg', fileSizeLimit: 2048, savePath: 'docs',
fileFormatCheck: function(format) {
if (format != 'jpg') {
}
},
fileSizeError: function(size) {
},
fileProgress: function(length, progress) {
},
start: function(fileName) {
$(".imageselectedcreaterromloader").show();
},
finish: function(fileName) {
$(".imageselectedcreaterromloader").hide(); //Doesnt hide here but works in ie
$(".imageselectedcreaterrom").css("backgroundImage", "url('docs/" + fileName + "')");//Image doesnt display but works in ie
}
});