使用到了ajaxfileupload.js插件,但是在ie浏览器内遇到了问题,点击按钮触发file的点击事件在谷歌浏览器内是没有问题的,但是到了ie浏览器点击以后事件完全没有执行。最后发现ie的浏览器机制不一样,不能用按钮去触发file点击事件,只能点击file事件才能上传,
但是file的样式并不满足我的需求,解决方法:
我把file按钮悬浮到上传按钮上方,然后设置它的宽度跟高度跟上传按钮一样,再把file按钮滤镜透明,这样不就实现我点击上传按钮触发file事件了,而不是中间多操作了一次:
用的到的样式: position:absolute;filter:alpha(opacity=0);opacity:0;这样就能兼容ie跟谷歌的滤镜透明效果
前端代码:
$(function () {
$("#file1").change(function () {
ajaxFileUpload();
});
})
function ajaxFileUpload() {
$.ajaxFileUpload({
url: 'Tool_CompanyWebimg.ashx', //用于文件上传的服务器端请求地址
secureuri: false, //是否需要安全协议,一般设置为false
fileElementId: 'file1', //文件上传域的ID
dataType: 'text', //返回值类型 一般设置为json
success: function (d) //服务器成功响应处理函数
{
}});
$("#file1").val("");//清空file的值
$("#file1").change(function () {//不知为何执行一次以后change事件会被注销掉,再绑定次就行
ajaxFileUpload();
});
}
后端代码:
Context.Response.ContentType = "text/html";
//获取上传文件队列
HttpServerUtility server = context.Server;
context.Response.Charset = "utf-8";
//获取上传文件队列
HttpPostedFile oFile = context.Request.Files["file"];
if (oFile != null)
{
//判断文件格式GIF , JPG , png
var geshi = oFile.FileName.Split('.')[oFile.FileName.Split('.').Length - 1].ToUpper();
if (geshi == "GIF" || geshi == "JPG" || geshi == "PNG")
{
if (oFile.ContentLength < 102400)
{
string dateFolder = HttpContext.Current.Server.MapPath("\\bmseek\\member\\Uploads\\");
string guidFileName = Convert.ToDateTime(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")).ToString("yyyyMMddHHmmssffff") + Path.GetExtension(oFile.FileName).ToLower();
oFile.SaveAs(dateFolder + "\\" + guidFileName);
context.Response.Write(guidFileName);
}
else
{
context.Response.Write("大小超过了102400");
}
}
else
{
context.Response.Write("不是图形类型");
}
}
火狐跟open浏览器因为公司暂时不要求支持也没去测试了,理论上是兼容的