相容ie跟谷歌上傳檔案
阿新 • • 發佈:2019-01-27
使用到了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瀏覽器因為公司暫時不要求支援也沒去測試了,理論上是相容的