1. 程式人生 > >相容ie跟谷歌上傳檔案

相容ie跟谷歌上傳檔案

使用到了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瀏覽器因為公司暫時不要求支援也沒去測試了,理論上是相容的