HTML5上传文件显示进度的实现代码

这里我们是结合asp.net mvc做为服务端，您也可以是其它的服务端语言。让我们看面这个片断的html：

复制代码

代码如下:

@using (html.beginform("upload", "home", formmethod.post, new { enctype = "multipart/form-data" , id="form1"}))
{
<div class="row">
<label for="file">
upload image:</label>
<input type="file" name="filetoupload" id="filetoupload" multiple="multiple" onchange="fileselected();" />
</div>
<div id="filename">
</div>
<div id="filesize">
</div>
<div id="filetype">
</div>
<div class="row">
<input type="button" onclick="uploadfile()" value="upload image" />
</div>
<div id="progressnumber">
</div>
}

相关的javascript是这样的：

复制代码

代码如下:

function fileselected() {
var file = document.getelementbyid('filetoupload').files[0];
if (file) {
var filesize = 0;
if (file.size > 1024 * 1024)
filesize = (math.round(file.size * 100 / (1024 * 1024)) / 100).tostring() + 'mb';
else
filesize = (math.round(file.size * 100 / 1024) / 100).tostring() + 'kb';
document.getelementbyid('filename').innerhtml = 'name: ' + file.name;
document.getelementbyid('filesize').innerhtml = 'size: ' + filesize;
document.getelementbyid('filetype').innerhtml = 'type: ' + file.type;
}
}
function uploadfile() {
var fd = new formdata();
fd.append("filetoupload", document.getelementbyid('filetoupload').files[0]);
var xhr = new xmlhttprequest();
xhr.upload.addeventlistener("progress", uploadprogress, false);
xhr.addeventlistener("load", uploadcomplete, false);
xhr.addeventlistener("error", uploadfailed, false);
xhr.addeventlistener("abort", uploadcanceled, false);
xhr.open("post", "home/upload");
xhr.send(fd);
}
function uploadprogress(evt) {
if (evt.lengthcomputable) {
var percentcomplete = math.round(evt.loaded * 100 / evt.total);
document.getelementbyid('progressnumber').innerhtml = percentcomplete.tostring() + '%';
}
else {
document.getelementbyid('progressnumber').innerhtml = 'unable to compute';
}
}
function uploadcomplete(evt) {
/* this event is raised when the server send back a response */
alert(evt.target.responsetext);
}
function uploadfailed(evt) {
alert("there was an error attempting to upload the file.");
}
function uploadcanceled(evt) {
alert("the upload has been canceled by the user or the browser dropped the connection.");
}

上面是就原生的javascript，在onchange事件执行fileselected的function，在点击button执行了uploadfile的function，这里使用xmlhttprequest实现ajax上传文件。 注意代码在firefox 14 可以工作，ie 9目前不支持file api，可以参加这里。 服务端的代码很简单：

复制代码

代码如下:

public class homecontroller : controller
{
public actionresult index()
{
return view();
}
/// <summary>
/// uploads the specified files.
/// </summary>
/// <param name="filetoupload">the files.</param>
/// <returns>actionresult</returns>
[httppost]
public actionresult upload(httppostedfilebase[] filetoupload)
{
foreach (httppostedfilebase file in filetoupload)
{
string path = system.io.path.combine(server.mappath("~/app_data"), system.io.path.getfilename(file.filename));
file.saveas(path);
}
viewbag.message = "file(s) uploaded successfully";
return redirecttoaction("index");
}
}

作者：petter liu