移動端HTML5實現檔案上傳

pc端上傳檔案多半用外掛程式，引入flash都沒關係，但是移動端要是還用各種冗餘的外掛程式估計得被噴死，專案裡面需要做上傳的功能，既然h5已經有相關的介面且相容性良好，當然優先考慮用h5來實現。

用的技術主要是：

ajax

filereader

formdata

html結構：

<

div 
class
="camera-area"
>
<
form 
enctype
="multipart/form-data"
method
="post"
>
<
input 
type
="file"
name
="filetoupload"
class
="filetoupload"
accept
="image/*"
capture
="camera"
/>
<
div 
class
="upload-progress"
><
span
>
span
>
div>
form
>
<
div 
class
="thumb"
>
div>
div>

已經封裝好的upload.js，依賴zepto

(function

($) ;
var funs =
funs.uploadfile();
},//非同步上傳檔案
監聽上傳進度
xhr.addeventlistener("load", funs.uploadcomplete, false
); xhr.addeventlistener("error", opts.uploadfailed, false
); xhr.open("post", opts.url);
xhr.send(fd);
},//檔案預覽
previewimage: function
(file) ;
})(img);
reader.readasdataurl(file);
},uploadprogress: 
function
(evt) 
},"uploadcomplete": function
(evt) 
};doms.filetoupload.on("change", function
() );
});}
});})(zepto);

呼叫方法：

$(".camera-area").fileupload();

php部分：

<?php

if (isset($_files['myfile'])) 
function writelog($log
) 
$log = $log."\r\n";
}?>

HTML5實現移動端複製功能

首先遇到這個需求是就各種，但是發現基本都是用js實現，而且相容性www.cppcns.com還非常不好。但是在尋覓和嘗試的過程中，發現只需要css 也可以完全實現的，對需要複製內容的標籤加上下面這幾行 就可以了。webkit touch callout all webk程式設計客棧it user s...

HTML5移動端優化

手機端筆記 float在渲染時計算量比較大，儘量減少使用 過多的font size引發css樹的效率 a 避免不必要的dom操作 b 盡量改變class而不是style，使用classlist代替classname c 避免使用document.write d 減少drawimage meta na...

HTML5移動端適配

基準html 機型寬度 可視區域 螢幕比例 html font site 元素寬度 px 元素寬度 rem iphone6 plus 基準 414px 110px 200px 10rem iphone6 375px 375 414 0.9057 375 414 10 9.058 px iphone5...