廢話不多說了，說一下今天給大家分享的是 html5上傳圖片。我們是在移動端使用的，但是這個在pc上也通用兼容性我只在谷歌測試過。之前一直用的angular寫的《用HTML5的File API做上傳圖片預覽能》。今天摒棄angular的東西分享一個html5 + js 圖片上傳案例。那么今天還是按照一定的步驟來講吧。
HTML 第一步創建html，我們在頁面中放置一個文件選擇的input#upload（PS：偷懶一下，這里就不再次寫案例了直接復制的我們的頁面）
CSS Code復制內容到剪貼板
- <div class="con4">
- <span class="btn upload">上傳<input type="file" class="upload_pic" id="upload" /></span>
- </div>
CSS注：css 寫的有些亂哈，看不懂的可以問我，或者直接自己寫一下就ok。
CSS Code復制內容到剪貼板
- con{
- width: %;
- height: auto;
- overflow: hidden;
- margin: % auto auto;
- color: #FFFFFF;
- }
- con .btn{
- width: %;
- height: px;
- line-height: px;
- text-align: center;
- background: #dbc;
- display: block;
- font-size: px;
- border-radius: px;
- }
- upload{
- float: left;
- position: relative;
- }
- upload_pic{
- display: block;
- width: %;
- height: px;
- position: absolute;
- left: ;
- top: ;
- opacity: ;
- border-radius: px;
- }
Javascript
通過getElementById獲取節點，判斷瀏覽器的兼容性，對于不支持FileReader接口的瀏覽器將給出一個提示并禁用input，否則監聽input的change事件。
JavaScript Code復制內容到剪貼板
-
- var input = document.getElementById("upload");
- if(typeof FileReader==='undefined'){
-
- input.setAttribute('disabled','disabled');
- }else{
- input.addEventListener('change',readFile,false);
- }
然后，當file_input的change事件觸發時，調用函數readFile()。在readFile中，我們首先獲取file對象，然后通過file的type屬性來檢測文件類型，我們當然只允許選擇圖像類型的文件，然后我們new一個FileReader實例，并調用readAsDataURL方法來讀取選中的圖像文件，最后在onload事件中，獲取到成功讀取的文件內容，并以插入一個img節點的方式顯示選中的圖片。
JavaScript Code復制內容到剪貼板
- function readFile(){
- var file = this.files[];
- if(!/image\/\w+/.test(file.type)){
- alert("文件必須為圖片！");
- return false;
- }
- var reader = new FileReader();
- reader.readAsDataURL(file);
-
- reader.onload = function(e){
- var data = this.result.split(',');
- var tp = (file.type == 'image/png')? 'png': 'jpg';
- var a = data[];
-
- ... ...
- }
- };
寫到這里我們已經完成了圖片上傳的功能了，大家有興趣的自己動手嘗試一下，不懂的地方或者我寫錯的地方一定要找我哦。 FileReader的方法和事件
