纯HTML5文件上传

Pure HTML5 file upload HTML5 upload tutorial: today we will develop a great HTML5 file upload form with progress bar and preview (at client-side). We have already gave you jQuery based solution, but today’s application don’t require jQuery at all. All made in pure HTML5 Javascript. I’m going to use FileReader (html5) to implement live preview (without uploading to server), and, going to use XMLHttpRequest to send data to server.

纯HTML5文件上传 HTML5上传教程：今天，我们将开发一个很棒HTML5文件上传表单，带有进度条和预览(在客户端)。我们已经为您提供了基于jQuery的解决方案，但是今天的应用程序完全不需要jQuery。全部使用纯HTML5 Javascript制作。我将使用FileReader(html5)实现实时预览(不上传到服务器)，并且将使用XMLHttpRequest将数据发送到服务器。

Here are our demo and downloadable package:

这是我们的演示和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the sources and lets begin !

好的，下载资源并开始吧！

步骤1. HTML (Step 1. HTML)

At this page you can see out form for upload images

在此页面上，您可以看到上传图像的表单

index.html (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="https://www.script-tutorials.com/pure-html5-file-upload/" 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>

<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="https://www.script-tutorials.com/pure-html5-file-upload/" 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>

步骤2. CSS (Step 2. CSS)

css / main.css (css/main.css)

I have selected all necessary styles for our html5 upload form

我已为html5上传表格选择了所有必需的样式

css / main.css (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);
}


.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);
}

步骤3. HTML5 JS (Step 3. HTML5 JS)

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 formatvar 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 warningsdocument.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 elementvar oFile = document.getElementById('image_file').files[0];// filter for image filesvar 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 filesizeif (oFile.size > iMaxFilesize) {document.getElementById('warnsize').style.display = 'block';return;}// get preview elementvar oImage = document.getElementById('preview');// prepare HTML5 FileReadervar oReader = new FileReader();oReader.onload = function(e){// e.target.result contains the DataURL which we will use as a source of the imageoImage.src = e.target.result;oImage.onload = function () { // binding onload event// we are going to display some custom image information heresResultFileSize = 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 DataURLoReader.readAsDataURL(oFile);
}
function startUploading() {// cleanup all temp statesiPreviousBytesLoaded = 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 FF3var vFD = new FormData(document.getElementById('upload_form'));// create XMLHttpRequest object, adding few event listeners, and POSTing our datavar 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 timeroTimer = setInterval(doInnerUpdates, 300);
}
function doInnerUpdates() { // we will use this function to display upload speedvar iCB = iBytesUploaded;var iDiff = iCB - iPreviousBytesLoaded;// if nothing new loaded - exitif (iDiff == 0)return;iPreviousBytesLoaded = iCB;iDiff = iDiff * 2;var iBytesRem = iBytesTotal - iPreviousBytesLoaded;var secondsRemaining = iBytesRem / iDiff;// update speed infovar 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 progressif (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 finishedvar 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 errordocument.getElementById('error2').style.display = 'block';clearInterval(oTimer);
}
function uploadAbort(e) { // upload abortdocument.getElementById('abort').style.display = 'block';clearInterval(oTimer);
}


// 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 formatvar 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 warningsdocument.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 elementvar oFile = document.getElementById('image_file').files[0];// filter for image filesvar 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 filesizeif (oFile.size > iMaxFilesize) {document.getElementById('warnsize').style.display = 'block';return;}// get preview elementvar oImage = document.getElementById('preview');// prepare HTML5 FileReadervar oReader = new FileReader();oReader.onload = function(e){// e.target.result contains the DataURL which we will use as a source of the imageoImage.src = e.target.result;oImage.onload = function () { // binding onload event// we are going to display some custom image information heresResultFileSize = 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 DataURLoReader.readAsDataURL(oFile);
}
function startUploading() {// cleanup all temp statesiPreviousBytesLoaded = 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 FF3var vFD = new FormData(document.getElementById('upload_form'));// create XMLHttpRequest object, adding few event listeners, and POSTing our datavar 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 timeroTimer = setInterval(doInnerUpdates, 300);
}
function doInnerUpdates() { // we will use this function to display upload speedvar iCB = iBytesUploaded;var iDiff = iCB - iPreviousBytesLoaded;// if nothing new loaded - exitif (iDiff == 0)return;iPreviousBytesLoaded = iCB;iDiff = iDiff * 2;var iBytesRem = iBytesTotal - iPreviousBytesLoaded;var secondsRemaining = iBytesRem / iDiff;// update speed infovar 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 progressif (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 finishedvar 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 errordocument.getElementById('error2').style.display = 'block';clearInterval(oTimer);
}
function uploadAbort(e) { // upload abortdocument.getElementById('abort').style.display = 'block';clearInterval(oTimer);
}

Most of code is already commented. So I will hope that you will understand all this code. Anyway – how it working: when we select file – function ‘fileSelected’ is executing. We filter all unnecessary formats (allow to upload next formats: bmp, gif, jpg, png, tif), in case of huge file – we will draw warning message. Then, through FileReader::readAsDataURL we will draw live preview of selected file. Plus, we will display another information about image: its name, size, type, and dimensions. Process of uploading is a little complicated. But generally, we have to prepare XMLHttpRequest object, add event listeners to next events: progress, load, error and abort. And after – post form data (I have used FormData class) to our ‘upload.php’ receiver.

大多数代码已被注释。因此，我希望您能理解所有这些代码。无论如何-它如何工作：当我们选择文件时-函数'fileSelected'正在执行。我们会过滤所有不必要的格式(允许上传下一个格式：bmp，gif，jpg，png，tif)，如果文件很大，我们会发出警告消息。然后，通过FileReader :: readAsDataURL，我们将绘制所选文件的实时预览。另外，我们将显示有关图像的其他信息：图像的名称，大小，类型和尺寸。上传过程有点复杂。但是通常，我们必须准备XMLHttpRequest对象，将事件侦听器添加到下一个事件：进度，加载，错误和中止。之后–将表单数据(我使用过FormData类)发布到我们的“ upload.php”接收器。

步骤4. PHP (Step 4. PHP)

upload.php (upload.php)


<?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;


<?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;

As you can see – I’m not uploading file. But, ‘echo’ back all info about accepted file. This information will appear in our <div id="upload_response"></div> element.

如您所见–我没有上传文件。但是，“回显”有关接受文件的所有信息。此信息将显示在我们的<div id =“ upload_response”> </ div>元素中。

现场演示

结论 (Conclusion)

Welcome back to read new awesome and unique articles about HTML5. Good luck!

欢迎回到阅读有关HTML5的精彩绝妙的新文章。祝好运！

翻译自: https://www.script-tutorials.com/pure-html5-file-upload/