ie8及其以下版本相容性問題之input file隱藏上傳檔案
檔案上傳時,預設的file標籤很難看,而且每個瀏覽器下都有很大差距。因此我們基本都把真正的file標籤給隱藏,然後建立一個標籤來替代它。但是由於IE出於安全方面的考慮上傳檔案時必須點選file的瀏覽按鈕選擇檔案才可以把檔案上傳上去。此時我們可以將file input透明化, 遮罩在自定義的button input 上面。這樣使用者看到的是我們自定義button的外觀而實際上點選的還是file標籤。
這樣一來我們自定義的按鈕存在又能真正點選到file標籤,IE下就可以正常上傳檔案了。
示例:
//html <div class="modifyInfo_upload pr"> <span>上傳頭像</span> <input type="file" name="portrait" id="upLoadPortrait" value=""> </div> //css .modifyInfo_upload{ height: 30px; text-align: center; margin-bottom: 29px; } .modifyInfo_upload span{ height: 30px; line-height: 30px; color: #1db69a; cursor: pointer; } .modifyInfo_upload input{ width: 58px; height: 20px; overflow: hidden; opacity: 0; -ms-filter:"alpha(opacity=0)"; position: absolute; top: 4px; left: 0; right: 0; margin: 0 auto; cursor: pointer; } //js var portraitPath; $("#upLoadPortrait").on('change',function(event){ if($(this).val() != ''){ var strExtension = $(this).val().substr($(this).val().lastIndexOf('.') + 1); if (strExtension != 'jpg' && strExtension != 'gif' && strExtension != 'png' && strExtension != 'bmp') { alert("請選擇圖片檔案!"); }else{ portraitPath = $(this).val(); console.log(portraitPath); $('.modifyInfo_portrait img').attr('src',portraitPath); } } });
相關推薦
ie8及其以下版本相容性問題之input file隱藏上傳檔案
檔案上傳時,預設的file標籤很難看,而且每個瀏覽器下都有很大差距。因此我們基本都把真正的file標籤給隱藏,然後建立一個標籤來替代它。但是由於IE出於安全方面的考慮上傳檔案時必須點選file的瀏覽按鈕選擇檔案才可以把檔案上傳上去。此時我們可以將file inp
ie8及其以下版本相容性問題之響應式
解決辦法:引入Respond.js讓IE6-8支援CSS3 Media Query 1.在css中正常用 min/max-width media queries @media screen and (min-width: 480px){ ...
Android WebView嵌入H5之file頭像上傳檔案,適配所有版本
最近公司需要開發新的專案,為了節省時間成本,要求整體嵌入H5介面。對,沒看錯是整體嵌入,心中一萬隻草泥馬奔騰,沒辦法大佬就是大佬,還是的照做。 今天來說說h5上傳頭像的問題吧。網上有很多的解決方案,開始我覺得好像很簡單,都有成功案例,等把程式碼copy下來,發現並不能執
input file 實現上傳預覽圖片,以base64上傳,相容IE8+,firefox,chrome
前言 最近在公司開發一個專案,其中涉及到一個公能,主要是上傳一些小圖片,而且在網站上需要大量引用這個小圖片的,對於上傳一些小的頭像等。一開始覺得直接上傳就好了,但是發現這樣子的話,一個小圖片就會發送一個http請求資源,大量的小圖片的請求資源的話,會造成伺服器資源的負擔。而
jquery判斷 input type="file"上傳檔案是否為空
要想獲取type="file"的input內容,用var file = $("id").val();肯定是不行的,下面是程式碼: html上傳按鈕為: <input type="file" id="reportXML" name="reportXML"
Input type="file"上傳檔案change事件只觸發一次解決方案
一、剛開始用法 $(function () { $("#file").change(excelUpload); }) excelUpload()函式內部就是提示是否確認上傳動作,一開始這樣寫只有在第一次選擇上傳檔案的時候觸發了excelUpload函式,顯然這樣是不行的。後來網上有人說快
input[type=file] 獲取上傳檔案的內容
上程式碼: <input type="file" name="file" id="fileUpload"> jquery: $("#fileUpload").change(function () { console.log($("#fileUp
input file 方式上傳圖片並實現實時預覽
用普通的html的 <input type="file"/> 標籤是不能實現實時預覽功能的,獲取表單的值可以得到圖片所在路徑:C:\fakepath\test.png,如果將它直接賦值給img標籤的href屬性,會報錯:Not allowed to load lo
HTML5 input file 圖片上傳,壓縮,上傳,預覽
<input type="file" id="textfile" accept="image/*"/>上傳 <div class="upP_img1"></div>預覽框 $('#textfile').on('change', fun
[置頂]關於使用input type=file 標籤上傳檔案的注意細節(上傳檔案 無法獲取檔案 問題)
首先確定服務端使用的是C#。其他語言我沒測試 第一、建立一個form,就像這樣 <form method="post" enctype="multipart/form-data" action=
JS input file圖片上傳預覽效果
首先,可以先了解file 和FileReader 的API,在選取一個或者多個檔案之後,訪問到代表了所選檔案的一個或多個File物件,這些物件被包含在一個FileList物件中。所有type屬性(at
input file 重複上傳同一張圖片失效的解決辦法
專案中遇到上傳圖片,需要本地預覽效果,測試時無意間發現,當選擇A圖片,然後更換為B圖片,完全正常;當選擇A圖片,取消該圖片,再測選擇A圖片後,發現不會再生成預覽效果,出現了bug;查詢相關資料後,終於找到了兩個解決辦法;方法一:來回切換input[type='file']的t
HTML5中file方法上傳檔案預覽 示例
效果圖如下: 程式碼如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <s
Angularjs ng-file-upload上傳檔案
ng-file-upload angular-file-upload 是一款輕量級的 AngularJS 檔案上傳工具,為不支援瀏覽器的 FileAPI polyfill 設計,使用 HTML5 直接進行檔案上傳。 特性 支援上傳進度,在上傳的時候,可以取消或者中止
iOS上傳檔案或base64(圖片)之AFNetworking 3.0+上傳檔案上傳圖片
1. base64 上傳圖片 /** * 上傳圖片到伺服器 * * @param image * @param photoID * @param photoType */ - (
linux系列之利用 rz 命令上傳檔案
1. 如何安裝? 1)編譯安裝 root 賬號登陸後,依次執行以下命令: # cd /tmp # wget http://www.ohse.de/uwe/releases/lrzsz-0.12.20.tar.gz # tar -zxvf lrzsz-0.12
工作總結之----IE使用ajax上傳檔案報錯,其他瀏覽器正常問題解決過程
錯誤資訊: 嚴重: Servlet.service() for servlet [springMVC] in context with path [] threw exception [Request processing failed; nested exceptio
5.5版本以上”No input file specified“問題解決
文件中 ecif div tac put 題解 rule body php .htaccess文件中的 RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L] 在默認情況下會導致No input file specified. 修改成
判斷瀏覽器核心是否是IE8及其以下
var DEFAULT_VERSION = 8.0; var ua = navigator.userAgent.toLowerCase(); var isIE = ua.indexOf("msie")>-1; var safariVersion; if(isIE){ &nb
ie8 支援html5 標籤及ie8 中jQ版本相容性問題
i8 不支援jq2.0以上的版本可以支援2.0以下的版本 ( 可以支援<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>) ie8 css hack