Bài viết này sẽ hướng dẫn tạo một trang upload sử dụng công nghệ HTML5 cực đẹp, trong bài viết tạo file upload có sử dụng HTML5 JavaScript và PHP.

Hướng dẫn tạo một trang upload sử dụng HTML5 đẹp

Đầu tiên chúng ta tạo một file index.html

<html lang="en" > 
<head> 
<meta charset="utf-8" /> 
<title>Pure HTML5 file upload | Script Tutorials</title> 
<link href="css/main.css" rel="stylesheet" type="text/css" /> 
<script src="js/script.js"></script> 
</head> 
<body> 
<header> 
<h2>Pure HTML5 file upload</h2> 
<a href="http://1thuthuat.blogspot.com" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a> </header> 
<div class="container"> 
<div class="contr">
<h2>You can select the file (image) and click Upload button</h2>
</div> 
<div class="upload_form_cont"> 
<form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php"> 
<div> 
<div>
<label for="image_file">Please select image file</label>
</div> 
<div>
<input type="file" name="image_file" id="image_file" onchange="fileSelected();" />
</div> 
</div> 
<div> 
<input type="button" value="Upload" onclick="startUploading()" /> 
</div> 
<div id="fileinfo"> 
<div id="filename">
</div> <div id="filesize">
</div> <div id="filetype">
</div> <div id="filedim">
</div> 
</div> 
<div id="error">You should select valid image files only!</div> 
<div id="error2">An error occurred while uploading the file</div> 
<div id="abort">The upload has been canceled by the user or the browser dropped the connection</div> 
<div id="warnsize">Your file is very big. We can't accept it. Please select more small file</div> 
<div id="progress_info"> <div id="progress"></div> 
<div id="progress_percent">&nbsp;</div> 
<div class="clear_both">
</div> 
<div> 
<div id="speed">&nbsp;</div> 
<div id="remaining">&nbsp;</div> 
<div id="b_transfered">&nbsp;</div> 
<div class="clear_both">
</div> 
</div> 
<div id="upload_response">
</div> 
</div> 
</form> 
<img id="preview" /> 
</div> 
</div> 
</body> 
</html>

Tiếp đến tạo một file css/main.css

.upload_form_cont { background: -moz-linear-gradient(#ffffff, #f2f2f2); background: -ms-linear-gradient(#ffffff, #f2f2f2); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2)); background: -webkit-linear-gradient(#ffffff, #f2f2f2); background: -o-linear-gradient(#ffffff, #f2f2f2); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2')"; background: linear-gradient(#ffffff, #f2f2f2); color:#000; overflow:hidden; } #upload_form { float:left; padding:20px; width:700px; } #preview { background-color:#fff; display:block; float:right; width:200px; } #upload_form > div { margin-bottom:10px; } #speed,#remaining { float:left; width:100px; } #b_transfered { float:right; text-align:right; } .clear_both { clear:both; } input { border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; -webkit-border-radius:10px; border:1px solid #ccc; font-size:14pt; padding:5px 10px; } input[type=button] { background: -moz-linear-gradient(#ffffff, #dfdfdf); background: -ms-linear-gradient(#ffffff, #dfdfdf); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #dfdfdf)); background: -webkit-linear-gradient(#ffffff, #dfdfdf); background: -o-linear-gradient(#ffffff, #dfdfdf); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf')"; background: linear-gradient(#ffffff, #dfdfdf); } #image_file { width:400px; } #progress_info { font-size:10pt; } #fileinfo,#error,#error2,#abort,#warnsize { color:#aaa; display:none; font-size:10pt; font-style:italic; margin-top:10px; } #progress { border:1px solid #ccc; display:none; float:left; height:14px; border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; -webkit-border-radius:10px; background: -moz-linear-gradient(#66cc00, #4b9500); background: -ms-linear-gradient(#66cc00, #4b9500); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66cc00), color-stop(100%, #4b9500)); background: -webkit-linear-gradient(#66cc00, #4b9500); background: -o-linear-gradient(#66cc00, #4b9500); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#4b9500'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#4b9500')"; background: linear-gradient(#66cc00, #4b9500); } #progress_percent { float:right; } #upload_response { margin-top: 10px; padding: 20px; overflow: hidden; display: none; border: 1px solid #ccc; border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; -webkit-border-radius:10px; box-shadow: 0 0 5px #ccc; background: -moz-linear-gradient(#bbb, #eee); background: -ms-linear-gradient(#bbb, #eee); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bbb), color-stop(100%, #eee)); background: -webkit-linear-gradient(#bbb, #eee); background: -o-linear-gradient(#bbb, #eee); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee')"; background: linear-gradient(#bbb, #eee); }

Tạo một file tên là js/script.js

js/script.js

// common variables var iBytesUploaded = 0; var iBytesTotal = 0; var iPreviousBytesLoaded = 0; var iMaxFilesize = 1048576; // 1MB var oTimer = 0; var sResultFileSize = ''; function secondsToTime(secs) { // we will use this function to convert seconds in normal time format var hr = Math.floor(secs / 3600); var min = Math.floor((secs - (hr * 3600))/60); var sec = Math.floor(secs - (hr * 3600) - (min * 60)); if (hr < 10) {hr = "0" + hr; } if (min < 10) {min = "0" + min;} if (sec < 10) {sec = "0" + sec;} if (hr) {hr = "00";} return hr + ':' + min + ':' + sec; }; function bytesToSize(bytes) { var sizes = ['Bytes', 'KB', 'MB']; if (bytes == 0) return 'n/a'; var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024))); return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i]; }; function fileSelected() { // hide different warnings document.getElementById('upload_response').style.display = 'none'; document.getElementById('error').style.display = 'none'; document.getElementById('error2').style.display = 'none'; document.getElementById('abort').style.display = 'none'; document.getElementById('warnsize').style.display = 'none'; // get selected file element var oFile = document.getElementById('image_file').files[0]; // filter for image files var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i; if (! rFilter.test(oFile.type)) { document.getElementById('error').style.display = 'block'; return; } // little test for filesize if (oFile.size > iMaxFilesize) { document.getElementById('warnsize').style.display = 'block'; return; } // get preview element var oImage = document.getElementById('preview'); // prepare HTML5 FileReader var oReader = new FileReader(); oReader.onload = function(e){ // e.target.result contains the DataURL which we will use as a source of the image oImage.src = e.target.result; oImage.onload = function () { // binding onload event // we are going to display some custom image information here sResultFileSize = bytesToSize(oFile.size); document.getElementById('fileinfo').style.display = 'block'; document.getElementById('filename').innerHTML = 'Name: ' + oFile.name; document.getElementById('filesize').innerHTML = 'Size: ' + sResultFileSize; document.getElementById('filetype').innerHTML = 'Type: ' + oFile.type; document.getElementById('filedim').innerHTML = 'Dimension: ' + oImage.naturalWidth + ' x ' + oImage.naturalHeight; }; }; // read selected file as DataURL oReader.readAsDataURL(oFile); } function startUploading() { // cleanup all temp states iPreviousBytesLoaded = 0; document.getElementById('upload_response').style.display = 'none'; document.getElementById('error').style.display = 'none'; document.getElementById('error2').style.display = 'none'; document.getElementById('abort').style.display = 'none'; document.getElementById('warnsize').style.display = 'none'; document.getElementById('progress_percent').innerHTML = ''; var oProgress = document.getElementById('progress'); oProgress.style.display = 'block'; oProgress.style.width = '0px'; // get form data for POSTing //var vFD = document.getElementById('upload_form').getFormData(); // for FF3 var vFD = new FormData(document.getElementById('upload_form')); // create XMLHttpRequest object, adding few event listeners, and POSTing our data var oXHR = new XMLHttpRequest(); oXHR.upload.addEventListener('progress', uploadProgress, false); oXHR.addEventListener('load', uploadFinish, false); oXHR.addEventListener('error', uploadError, false); oXHR.addEventListener('abort', uploadAbort, false); oXHR.open('POST', 'upload.php'); oXHR.send(vFD); // set inner timer oTimer = setInterval(doInnerUpdates, 300); } function doInnerUpdates() { // we will use this function to display upload speed var iCB = iBytesUploaded; var iDiff = iCB - iPreviousBytesLoaded; // if nothing new loaded - exit if (iDiff == 0) return; iPreviousBytesLoaded = iCB; iDiff = iDiff * 2; var iBytesRem = iBytesTotal - iPreviousBytesLoaded; var secondsRemaining = iBytesRem / iDiff; // update speed info var iSpeed = iDiff.toString() + 'B/s'; if (iDiff > 1024 * 1024) { iSpeed = (Math.round(iDiff * 100/(1024*1024))/100).toString() + 'MB/s'; } else if (iDiff > 1024) { iSpeed = (Math.round(iDiff * 100/1024)/100).toString() + 'KB/s'; } document.getElementById('speed').innerHTML = iSpeed; document.getElementById('remaining').innerHTML = '| ' + secondsToTime(secondsRemaining); } function uploadProgress(e) { // upload process in progress if (e.lengthComputable) { iBytesUploaded = e.loaded; iBytesTotal = e.total; var iPercentComplete = Math.round(e.loaded * 100 / e.total); var iBytesTransfered = bytesToSize(iBytesUploaded); document.getElementById('progress_percent').innerHTML = iPercentComplete.toString() + '%'; document.getElementById('progress').style.width = (iPercentComplete * 4).toString() + 'px'; document.getElementById('b_transfered').innerHTML = iBytesTransfered; if (iPercentComplete == 100) { var oUploadResponse = document.getElementById('upload_response'); oUploadResponse.innerHTML = '<h1>Please wait...processing</h1>'; oUploadResponse.style.display = 'block'; } } else { document.getElementById('progress').innerHTML = 'unable to compute'; } } function uploadFinish(e) { // upload successfully finished var oUploadResponse = document.getElementById('upload_response'); oUploadResponse.innerHTML = e.target.responseText; oUploadResponse.style.display = 'block'; document.getElementById('progress_percent').innerHTML = '100%'; document.getElementById('progress').style.width = '400px'; document.getElementById('filesize').innerHTML = sResultFileSize; document.getElementById('remaining').innerHTML = '| 00:00:00'; clearInterval(oTimer); } function uploadError(e) { // upload error document.getElementById('error2').style.display = 'block'; clearInterval(oTimer); } function uploadAbort(e) { // upload abort document.getElementById('abort').style.display = 'block'; clearInterval(oTimer); }

Cuối cùng tạo một file upload.php

upload.php#sthash.niIXQyGU.dpuf

<?php function bytesToSize1024($bytes, $precision = 2) { $unit = array('B','KB','MB'); return @round($bytes / pow(1024, ($i = floor(log($bytes, 1024)))), $precision).' '.$unit[$i]; } $sFileName = $_FILES['image_file']['name']; $sFileType = $_FILES['image_file']['type']; $sFileSize = bytesToSize1024($_FILES['image_file']['size'], 1); echo <<<EOF <p>Your file: {$sFileName} has been successfully received.</p> <p>Type: {$sFileType}</p> <p>Size: {$sFileSize}</p> EOF;

Cuối cùng là hoàn tất tạo một trang upload sử dụng công nghệ HTML5 chỉ cần chạy file index.html là bạn sẽ thấy kết quả, chúc thành công!

Admin Huỳnh Phụng

Xuất thân là Quản Trị Kinh Doanh. Yêu thích Marketing Online và trở thành Blogger với gần 1000 bài viết về nhiều lĩnh vực. Blog cá nhân http://toilaquantri.com