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:</la园林绿化养护管理bel>

<input type=”file” name=”filetoupload” id=”filetoupload” multiple=”multiple” onchange=”filelected();” />

</div>

<div id=”filename”>

</div>

<div id=”filesize”>

</div>

<div id=”filetype”>

</div>

<div class=”row”>

<input type=”button” onclick=”uploadfildrovee()” value=”upload image” />

</div>

<div id=”progressnumber”>

</div>

}

相关的javascript是这样的：

复制代码 代码如下:

function filelected() {

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

el

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, fal);

xhr.addeventlistener(“load”, uploadcomplete, fal);

xhr.addeventlistener(“error”, uploadfailed, fal);

xhr.addeventlistener(“abort”, uploadcanceled, fal);

xhr.杭州旅游必去十大景点open(“post”, “home/upload”);

xhr.nd(fd);

}

function uploadprogress(evt) {

if (evt.lengthcomputable) {

var percentcomplete = math.round(evt.loaded * 100 / evt.total);

document.getelementbyid(‘progressnumber’).innerhtml = percentcomplete.tostring() + ‘%̵摆脱贫困读后感7;;

}

el {

document.getelementbyid(‘progressnumber’).innerhtml = ‘unable to compute’;

}

}

function uploadcomplete(evt) {

/* this event is raid when the rver nd back a respon */

alert(evt.target.respontext);

}

function uploadfailed(evt) {

alert(“there was an error attempting to upload the file.”);

}

function uploadcanceled(evt) {

alert(“the upload has been canceled by the ur or the browr dropped the connection.”);

}

上面是就原生的javascript，在onchange事件执行filelected的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(httppostedfileba[] filetoupload)

{

foreach (httppostedfileba file in filetoupload)

{

string path = system.io.path.combine(rver.mappath(“~/app_data”), system.io.path.getfilename(file.filename));

file.saveas(path);

}

viewbag.message = “file(s) uploaded successfully”;

return redirecttoaction(“index”);

}

}

作者：petter liu