HTML5是一个大趋势,也是一个非常棒的方式,可以构建用户喜欢的漂亮的Web应用程序。HTML5在web应用中引入File　API来代表文件对象,访问数据。　现在我们有2中方式使用它:　1、通过使用　　,添加它的change事件　2、直接从电脑上拖拽文件进入浏览器　这里有很多精美的东西,我会尽量在这里展示的。　HTML5　文件上传　–　上传多个文件　让我们着手开始写一些代码。对于HTML部分我们使用form表单并添加一些特性。　<　form　enctype　=　"multipart/form-data"　method　=　"post"　action　=　"upload.php"　>　<　div　class　=　"row"　>　<　label　for　=　"filesToUpload"　>　Select　Files　to　Upload　<　br　/>　<　input　type　=　"file"　name　=　"filesToUpload"　id　=　"filesToUpload"　multiple　=　"multiple"　/>　<　output　id　=　"filesInfo"　>　　<　div　class　=　"row"　>　<　input　type　=　"submit"　value　=　"Upload"　/>　　　我们不必使用非常好看的样式,因此不加入CSS。注意file　input的name属性。它允许我们将多个文件存储为数组。并且注意这个multiple属性,这个属性告诉浏览器能够同时在浏览窗口选择多个文件。　下面是JavaScript代码:　　现在试一下,选择多个文件,你应该能够在输出元素的表单下面看到一些文件信息。　如果浏览器支持是再好不过的了,检测浏览器支持性的代码:　function　fileSelect　(　evt　)　{　if　(　window　.　File　&&　window　.　FileReader　&&　window　.　FileList　&&　window　.　Blob　)　{　var　files　=　evt　.　target　.　files　;　var　result　=　''　;　var　file　;　for　(　var　i　=　0　;　file　=　files　[　i　];　i　++　)　{　result　+=　'
'　+　file　.　name　+　'　'　+　file　.　size　+　'　bytes
'　;　}　document　.　getElementById　(　'filesInfo'　).　innerHTML　=　'

'　+　result　+　'

'　;　}　else　{　alert　(　'The　File　APIs　are　not　fully　supported　in　this　browser.document　.　getElementById　(　'filesToUpload'　).　addEventListener　(　'change'　,　fileSelect　,　false　);　如果运行在Inernet　Explorer中运行这段代码,将只能选择一个文件并且alert出The　File　APIs　are　not　fully　supported　in　this　browser.　HTML5文件上传-拖拽支持　这里是真正有意思的部分。一些浏览器设置　input　type="file"　作为一个拖拽的目标,因此如果你试图拖放文件在表单中,就会起作用。　拖放的HTML看起来像这样:　Drop　some　files　here

不要介意内联CSS,只是为了让拖放目标变大。JavaScript与以前非常相似:　function　fileSelect　(　evt　)　{　evt　.　stopPropagation　();　evt　.　preventDefault　();　if　(　window　.　File　&&　window　.　FileReader　&&　window　.　FileList　&&　window　.　Blob　)　{　var　files　=　evt　.　dataTransfer　.　files　;　var　result　=　''　;　var　file　;　for　(　var　i　=　0　;　file　=　files　[　i　];　i　++　)　{　result　+=　'
'　+　file　.　name　+　'　'　+　file　.　size　+　'　bytes
'　;　}　document　.　getElementById　(　'filesInfo'　).　innerHTML　=　'

'　+　result　+　'

'　;　}　else　{　alert　(　'The　File　APIs　are　not　fully　supported　in　this　browser.function　dragOver　(　evt　)　{　evt　.　stopPropagation　();　evt　.　preventDefault　();　evt　.　dataTransfer　.　dropEffect　=　'copy'　;　}　var　dropTarget　=　document　.　getElementById　(　'dropTarget'　);　dropTarget　.　addEventListener　(　'dragover'　,　dragOver　,　false　);　dropTarget　.　addEventListener　(　'drop'　,　fileSelect　,　false　);　HTML5　图片上传　–　上传之前预览　在实际上传之前,图片预览。　一些HTML:　　　Select　Files　to　Upload

JavaScript:　function　fileSelect　(　evt　)　{　if　(　window　.　File　&&　window　.　FileReader　&&　window　.　FileList　&&　window　.　Blob　)　{　var　files　=　evt　.　target　.　files　;　var　result　=　''　;　var　file　;　for　(　var　i　=　0　;　file　=　files　[　i　];　i　if　the　file　is　not　an　image,　continue　if　(　!　file　.　type　.　match　(　'image.continue　;　}　reader　=　new　FileReader　();　reader　.　onload　=　(　function　(　tFile　)　{　return　function　(　evt　)　{　var　div　=　document　.　createElement　(　'div'　);　div　.　innerHTML　=　'　tempH　)　{　if　(　tempW　>　MAX_WIDTH　)　{　tempH　*=　MAX_WIDTH　/　tempW　;　tempW　=　MAX_WIDTH　;　}　}　else　{　if　(　tempH　>　MAX_HEIGHT　)　{　tempW　*=　MAX_HEIGHT　/　tempH　;　tempH　=　MAX_HEIGHT　;　}　}　var　canvas　=　document　.　createElement　(　'canvas'　);　canvas　.　width　=　tempW　;　canvas　.　height　=　tempH　;　var　ctx　=　canvas　.　getContext　(　"2d"　);　ctx　.　drawImage　(　this　,　0　,　0　,　tempW　,　tempH　);　var　dataURL　=　canvas　.　toDataURL　(　"image/jpeg"　);　var　xhr　=　new　XMLHttpRequest　();　xhr　.　onreadystatechange　=　function　(　ev　){　document　.　getElementById　(　'filesInfo'　).　innerHTML　=　'Done!'　;　};　xhr　.　open　(　'POST'　,　'uploadResized.php'　,　true　);　xhr　.　setRequestHeader　(　"Content-type"　,　"application/x-www-form-urlencoded"　);　var　data　=　'image='　+　dataURL　;　xhr　.　send　(　data　);　}　}　reader　.　readAsDataURL　(　file　);　}　在服务器端保存图片的代码:　if　(　$_POST　)　{　define　(　'UPLOAD_DIR'　,　'uploads/'　);　$img　=　$_POST　[　'filesToUpload'　];　$img　=　str_replace　(　'data:image/jpeg;base64,img　);　$img　=　str_replace　img　);　$data　=　base64_decode　(　$img　);　$file　=　UPLOAD_DIR　.　uniqid　()　.　'.jpg'　;　$success　=　file_put_contents　(　$file　,　$data　);　print　$success　?　$file　:　'Unable　to　save　the　file.'　;　}