| 纯HTML5上传图片文件(带进度条和预览) | 您所在的位置：网站首页 › 查看qq群上传照片进度怎么看 › 纯HTML5上传图片文件(带进度条和预览) |
纯HTML5上传图片文件(带进度条和预览)
|
本文介绍一个很棒的 HTML5 文件上传表单，带有进度条和预览（在客户端），应用程序不需要 jQuery，全部用纯 HTML5 Javascript 制作。我将使用 FileReader (html5) 来实现实时预览（无需上传到服务器），并且将使用 XMLHttpRequest 将数据发送到服务器。
纯HTML5上传图片文件 demodownload 下载源代码，让我们开始吧！ 步骤 1. HTML在这个页面你可以看到上传图片的表格： Pure HTML5 file upload 请选择一个图片文件，然后点击上传按钮 请选择图片文件 你应该选择有效的图片文件 上传文件出现错误 上传已被用户取消或浏览器断开连接 文件太大，超过了可接受范围 第 2 步. CSScss/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);}步骤 3. HTML5 JSjs/script.js // common variablesvar iBytesUploaded = 0;var iBytesTotal = 0;var iPreviousBytesLoaded = 0;var iMaxFilesize = 1048576; // 1MBvar 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 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 = 'Please wait...processing'; 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);}大多数代码已经被注释了。所以我希望你能理解所有这些代码。 它是如何工作的： 1、当我们选择文件时，函数“fileSelected”正在执行。 2、我们过滤掉所有不必要的格式（允许上传格式：bmp、gif、jpg、png、tif），如果文件很大，我们会绘制警告信息。 3、通过 FileReader::readAsDataURL 我们将绘制所选文件的实时预览。另外，我们将显示有关图像的其他信息：名称、大小、类型和尺寸。 上传过程有点复杂。但一般来说，我们必须准备 XMLHttpRequest 对象，为事件添加监听器：progress、load、error 和 abort。然后，将表单数据（我使用 FormData 类）发布到我们的“upload.php”接收器。 第 4 步. PHPupload.php |
【本文地址】
公司简介
联系我们