支持浏览图片，显示上传进度，速度
有个在线 demo,同时还有个其他比较好看的插件推荐 https://github.com/blueimp/jQuery-File-Upload
01
<html lang="en" >
02
<head>
03
<meta charset="utf-8" />
04
<title>Pure HTML5 file upload | Script Tutorials</title>
05
<link href="css/main.css" rel="stylesheet" type="text/css" />
06
<script sc="js/script.js"></script>
07
</head>
08
<body>
09
<header>
10
<h2>Pure HTML5 file upload</h2>
11
<a href="http://www.script-tutorials.com/pure-html5-file-upload/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
12
</header>
13
<div class="container">
14
<div class="contr"><h2>You can select the file (image) and click Upload button</h2></div>
15
16
<div class="upload_form_cont">
17
<form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php">
18
<div>
19
<div><label for="image_file">Please select image file</label></div>
20
<div><input type="file" name="image_file" id="image_file" onchange="fileSelected();" /></div>
21
</div>
22
<div>
23
<input type="button" value="Upload" onclick="startUploading()" />
24
</div>
25
<div id="fileinfo">
26
<div id="filename"></div>
27
<div id="filesize"></div>
28
<div id="filetype"></div>
29
<div id="filedim"></div>
30
</div>
31
<div id="error">You should select valid image files only!</div>
32
<div id="error2">An error occurred while uploading the file</div>
33
<div id="abort">The upload has been canceled by the user or the browser dropped the connection</div>
34
<div id="warnsize">Your file is very big. We can't accept it. Please select more small file</div>
35
36
<div id="progress_info">
37
<div id="progress"></div>
38
<div id="progress_percent"> </div>
39
<div class="clear_both"></div>
40
<div>
41
<div id="speed"> </div>
42
<div id="remaining"> </div>
43
<div id="b_transfered"> </div>
44
<div class="clear_both"></div>
45
</div>
46
<div id="upload_response"></div>
47
</div>
48
</form>
49
50
<img id="preview" />
51
</div>
52
</div>
53
</body>
54
</html>
Step 2. CSS
css/main.css
I have selected all necessary styles for our html5 upload form
css/main.css
001
.upload_form_cont {
002
background: -moz-linear-gradient(#ffffff, #f2f2f2);
003
background: -ms-linear-gradient(#ffffff, #f2f2f2);
004
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
005
background: -webkit-linear-gradient(#ffffff, #f2f2f2);
006
background: -o-linear-gradient(#ffffff, #f2f2f2);
007
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2');
008
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2')";
009
background: linear-gradient(#ffffff, #f2f2f2);
010
011
color:#000;
012
overflow:hidden;
013
}
014
#upload_form {
015
float:left;
016
padding:20px;
017
width:700px;
018
}
019
#preview {
020
background-color:#fff;
021
display:block;
022
float:right;
023
width:200px;
024
}
025
#upload_form > div {
026
margin-bottom:10px;
027
}
028
#speed,#remaining {
029
float:left;
030
width:100px;
031
}
032
#b_transfered {
033
float:right;
034
text-align:right;
035
}
036
.clear_both {
037
clear:both;
038
}
039
input {
040
border-radius:10px;
041
-moz-border-radius:10px;
042
-ms-border-radius:10px;
043
-o-border-radius:10px;
044
-webkit-border-radius:10px;
045
046
border:1px solid #ccc;
047
font-size:14pt;
048
padding:5px 10px;
049
}
050
input[type=button] {
051
background: -moz-linear-gradient(#ffffff, #dfdfdf);
052
background: -ms-linear-gradient(#ffffff, #dfdfdf);
053
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #dfdfdf));
054
background: -webkit-linear-gradient(#ffffff, #dfdfdf);
055
background: -o-linear-gradient(#ffffff, #dfdfdf);
056
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf');
057
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf')";
058
background: linear-gradient(#ffffff, #dfdfdf);
059
}
060
#image_file {
061
width:400px;
062
}
063
#progress_info {
064
font-size:10pt;
065
}
066
#fileinfo,#error,#error2,#abort,#warnsize {
067
color:#aaa;
068
display:none;
069
font-size:10pt;
070
font-style:italic;
071
margin-top:10px;
072
}
073
#progress {
074
border:1px solid #ccc;
075
display:none;
076
float:left;
077
height:14px;
078
079
border-radius:10px;
080
-moz-border-radius:10px;
081
-ms-border-radius:10px;
082
-o-border-radius:10px;
083
-webkit-border-radius:10px;
084
085
background: -moz-linear-gradient(#66cc00, #4b9500);
086
background: -ms-linear-gradient(#66cc00, #4b9500);
087
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66cc00), color-stop(100%, #4b9500));
088
background: -webkit-linear-gradient(#66cc00, #4b9500);
089
background: -o-linear-gradient(#66cc00, #4b9500);
090
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#4b9500');
091
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#4b9500')";
092
background: linear-gradient(#66cc00, #4b9500);
093
}
094
#progress_percent {
095
float:right;
096
}
097
#upload_response {
098
margin-top: 10px;
099
padding: 20px;
100
overflow: hidden;
101
display: none;
102
border: 1px solid #ccc;
103
104
border-radius:10px;
105
-moz-border-radius:10px;
106
-ms-border-radius:10px;
107
-o-border-radius:10px;
108
-webkit-border-radius:10px;
109
110
box-shadow: 0 0 5px #ccc;
111
background: -moz-linear-gradient(#bbb, #eee);
112
background: -ms-linear-gradient(#bbb, #eee);
113
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bbb), color-stop(100%, #eee));
114
background: -webkit-linear-gradient(#bbb, #eee);
115
background: -o-linear-gradient(#bbb, #eee);
116
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee');
117
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee')";
118
background: linear-gradient(#bbb, #eee);
119
}
Step 3. HTML5 JS
js/script.js
001
// common variables
002
var iBytesUploaded = 0;
003
var iBytesTotal = 0;
004
var iPreviousBytesLoaded = 0;
005
var iMaxFilesize = 1048576; // 1MB
006
var oTimer = 0;
007
var sResultFileSize = '';
008
009
function secondsToTime(secs) { // we will use this function to convert seconds in normal time format
010
var hr = Math.floor(secs / 3600);
011
var min = Math.floor((secs - (hr * 3600))/60);
012
var sec = Math.floor(secs - (hr * 3600) - (min * 60));
013
014
if (hr < 10) {hr = "0" + hr; }
015
if (min < 10) {min = "0" + min;}
016
if (sec < 10) {sec = "0" + sec;}
017
if (hr) {hr = "00";}
018
return hr + ':' + min + ':' + sec;
019
};
020
021
function bytesToSize(bytes) {
022
var sizes = ['Bytes', 'KB', 'MB'];
023
if (bytes == 0) return 'n/a';
024
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
025
return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
026
};
027
028
function fileSelected() {
029
030
// hide different warnings
031
document.getElementById('upload_response').style.display = 'none';
032
document.getElementById('error').style.display = 'none';
033
document.getElementById('error2').style.display = 'none';
034
document.getElementById('abort').style.display = 'none';
035
document.getElementById('warnsize').style.display = 'none';
036
037
// get selected file element
038
var oFile = document.getElementById('image_file').files[0];
039
040
// filter for image files
041
var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
042
if (! rFilter.test(oFile.type)) {
043
document.getElementById('error').style.display = 'block';
044
return;
045
}
046
047
// little test for filesize
048
if (oFile.size > iMaxFilesize) {
049
document.getElementById('warnsize').style.display = 'block';
050
return;
051
}
052
053
// get preview element
054
var oImage = document.getElementById('preview');
055
056
// prepare HTML5 FileReader
057
var oReader = new FileReader();
058
oReader.onload = function(e){
059
060
// e.target.result contains the DataURL which we will use as a source of the image
061
oImage.src = e.target.result;
062
063
oImage.onload = function () { // binding onload event
064
065
// we are going to display some custom image information here
066
sResultFileSize = bytesToSize(oFile.size);
067
document.getElementById('fileinfo').style.display = 'block';
068
document.getElementById('filename').innerHTML = 'Name: ' + oFile.name;
069
document.getElementById('filesize').innerHTML = 'Size: ' + sResultFileSize;
070
document.getElementById('filetype').innerHTML = 'Type: ' + oFile.type;
071
document.getElementById('filedim').innerHTML = 'Dimension: ' + oImage.naturalWidth + ' x ' + oImage.naturalHeight;
072
};
073
};
074
075
// read selected file as DataURL
076
oReader.readAsDataURL(oFile);
077
}
0
78
079 function startUploading() {
080 // cleanup all temp states
081 iPreviousBytesLoaded = 0;
082 document.getElementById('upload_response').style.display = 'none';
083 document.getElementById('error').style.display = 'none';
084 document.getElementById('error2').style.display = 'none';
085 document.getElementById('abort').style.display = 'none';
086 document.getElementById('warnsize').style.display = 'none';
087 document.getElementById('progress_percent').innerHTML = '';
088 var oProgress = document.getElementById('progress');
089 oProgress.style.display = 'block';
090 oProgress.style.width = '0px';
091
092 // get form data for POSTing
093 //var vFD = document.getElementById('upload_form').getFormData(); // for FF3
094 var vFD = new FormData(document.getElementById('upload_form'));
095
096 // create XMLHttpRequest object, adding few event listeners, and POSTing our data
097 var oXHR = new XMLHttpRequest();
098 oXHR.upload.addEventListener('progress', uploadProgress, false);
099 oXHR.addEventListener('load', uploadFinish, false);
100 oXHR.addEventListener('error', uploadError, false);
101 oXHR.addEventListener('abort', uploadAbort, false);
102 oXHR.open('POST', 'upload.php');
103 oXHR.send(vFD);
104
105 // set inner timer
106 oTimer = setInterval(doInnerUpdates, 300);
107 }
108
109 function doInnerUpdates() { // we will use this function to display upload speed
110 var iCB = iBytesUploaded;
111 var iDiff = iCB - iPreviousBytesLoaded;
112
113 // if nothing new loaded - exit
114 if (iDiff == 0)
115 return;
116
117 iPreviousBytesLoaded = iCB;
118 iDiff = iDiff * 2;
119 var iBytesRem = iBytesTotal - iPreviousBytesLoaded;
120 var secondsRemaining = iBytesRem / iDiff;
121
122 // update speed info
123 var iSpeed = iDiff.toString() + 'B/s';
124 if (iDiff > 1024 * 1024) {
125 iSpeed = (Math.round(iDiff * 100/(1024*1024))/100).toString() + 'MB/s';
126 } else if (iDiff > 1024) {
127 iSpeed = (Math.round(iDiff * 100/1024)/100).toString() + 'KB/s';
128 }
129
130 document.getElementById('speed').innerHTML = iSpeed;
131 document.getElementById('remaining').innerHTML = '| ' + secondsToTime(secondsRemaining);
132 }
133
134 function uploadProgress(e) { // upload process in progress
135 if (e.lengthComputable) {
136 iBytesUploaded = e.loaded;
137 iBytesTotal = e.total;
138 var iPercentComplete = Math.round(e.loaded * 100 / e.total);
139 var iBytesTransfered = bytesToSize(iBytesUploaded);
140
141 document.getElementById('progress_percent').innerHTML = iPercentComplete.toString() + '%';
142 document.getElementById('progress').style.width = (iPercentComplete * 4).toString() + 'px';
143 document.getElementById('b_transfered').innerHTML = iBytesTransfered;
144 if (iPercentComplete == 100) {
145 var oUploadResponse = document.getElementById('upload_response');
146 oUploadResponse.innerHTML = '<h1>Please wait...processing</h1>';
147 oUploadResponse.style.display = 'block';
148 }
149 } else {
150 document.getElementById('progress').innerHTML = 'unable to compute';
151 }
152 }
153
154 function uploadFinish(e) { // upload successfully finished
155 var oUploadResponse = document.getElementById('upload_response');
156 oUploadResponse.innerHTML = e.target.responseText;
157 oUploadResponse.style.display = 'block';
158
159 document.getElementById('progress_percent').innerHTML = '100%';
160 document.getElementById('progress').style.width = '400px';
161 document.getElementById('filesize').innerHTML = sResultFileSize;
162 document.getElementById('remaining').innerHTML = '| 00:00:00';
163
164 clearInterval(oTimer);
165 }
166
167 function uploadError(e) { // upload error
168 document.getElementById('error2').style.display = 'block';
169 clearInterval(oTimer);
170 }
171
172 function uploadAbort(e) { // upload abort
173 document.getElementById('abort').style.display = 'block';
174 clearInterval(oTimer);
175 }
分享到：
相关推荐
jQuery-File-Upload上传插件
jQuery-File-Upload for asp.net MVC
一个很详细的jquery-file-upload的java案例
jQuery-File-Upload 源码 demo
jQuery-File-Upload-9.11.2(完整版，插件已下载),官方的很多引用文件都是线上的，加载很慢，下载到本地后更靠谱，这个版本是已经整理好的，直接调用后台php的部分也在其中，可以直接应用到项目中，直接拷贝过去就...
jQuery File Upload演示与下载
jQuery-File-Upload的例子
jQuery-File-Upload-master
jquery ajax file upload
jquery_file_upload 可运行
概述jQuery Upload File插件提供了带有进度条的多个文件上传功能，可与支持标准HTML表单文件上传功能的任何服务器端平台（Google App Engine，PHP，Python，Ruby on Rails，Java等）一起使用。演示版文献资料
一款好用的jQuery-File-Upload上传插件，便于上传文件
jQuery-file-upload的各种语言拖拽上传文件功能。官网最新版本
很好jq上传插件
•Multiple File Upload Widgets on the same page •Multiple File Input Fields in one Form. •How to implement Chunked file uploads. •Cross domain uploads (Cross-site uploads). •How to add Drop zone ...
jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。