html5上传图片带进度条，适用于手机端网页

来源：互联网发布：java md5签名算法编辑：程序博客网时间：2024/05/17 07:57

做一个手机网页的上传图片插件，要求必须带有进度条和预览，google了一个国外的插件，扒下来改了改，测试用起来挺方便，不用加载其他第三方js库。

首先写一个前台html页面，我写的是移动端的页面，为了看起来方便，js和html都写在一起：

<!DOCTYPE html><html>    <head>    <meta charset="utf-8">        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">        <meta name="apple-mobile-web-app-capable" content="yes">        <meta name="apple-mobile-web-app-status-bar-style" content="black">        <meta name="format-detection" content="telephone=no">        <title>HTML5带进度上传图片</title><style type="text/css">  /*必要的显示进度条的css*/.clear_both{clear:both;}#progress_info {font-size:10pt;}#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);}</style>    </head>    <body><form id="upload_form" enctype="multipart/form-data" method="post" style="max-width:640px" action="upload.php"><input type="file" style="padding:0;width:70px;border:0 none" name="image_file" id="image_file" onChange="fileSelected();" /></div><br><input type="button" id="upload_btn" value="Upload" onClick="startUploading()" /><div id="progress_info"><div id="progress"></div> <span id="progress_percent"> </span><div class="clear_both"></div><div><span id="speed"></span> <span id="remaining"></span><div class="clear_both"></div></div></div><!--父级div控制图片显示的宽度--><div style="width:300px"> <img id="preview" style="width:100%;display:none"></div></form><script type="text/javascript"> // common variablesvar iBytesUploaded = 0;var iBytesTotal = 0;var iPreviousBytesLoaded = 0;var iMaxFilesize = 1048576; // 1MBvar oTimer = 0;var oFile;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() {//选择的文件oFile = document.getElementById('image_file').files[0];//文件类型var file_type = oFile.type;//文件大小var file_size = bytesToSize(oFile.size);//只能是图片的正则var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;if (!rFilter.test(file_type)) {alert("只能上传图片");return;}//超过限定大小if (file_size > iMaxFilesize) {alert("图片不能超过1M");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   //todo   //文件宽高   var pic_width = oImage.naturalWidth;    var pic_height = oImage.naturalHeight;};};//按DataUrl读取选择的文件oReader.readAsDataURL(oFile);document.getElementById('upload_btn').disabled='';}function startUploading() {if(!oFile){   alert('请选择图片');   return false;}document.getElementById('upload_btn').disabled='true';// cleanup all temp statesiPreviousBytesLoaded = 0;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, 100);}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);document.getElementById('progress_percent').innerHTML = iPercentComplete.toString() + '%';document.getElementById('progress').style.width = (iPercentComplete * 2).toString() + 'px';//上传完成if (iPercentComplete == 100) {//todo}} else{document.getElementById('progress').innerHTML = '无法获取上传进度';}}function uploadFinish(e) { // upload successfully finishedvar data = eval('('+e.target.responseText+')');if(data.error==1){   alert(data.msg);   return;}if(data.error==0){document.getElementById('progress_percent').innerHTML = '100%';document.getElementById('progress').style.width = '200px';document.getElementById('remaining').innerHTML = '00:00:00';//document.getElementById('progress_info').style.display = 'none';document.getElementById('preview').style.display = 'block';}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);}</script> </body></html>

然后是一个服务器端页面，我这里用的是php：

<?php//服务器端不作文件格式、大小的验证，只测试是否上传成功//进行验证，若验证失败，返回json//echo json_encode(array('error'=>1,'msg'=>'这是验证未通过的原因'));if (move_uploaded_file($_FILES['image_file']['tmp_name'], "upload/save.jpg")){   //todo} //以json形式返回处理结果echo json_encode(array('error'=>0,'url'=>'/upload/save.jpg'));exit;?>

在当前目录下新建一个用于保存图片的目录：upload，就可以运行程序了，小巧方便，运行结果如下：

1 0