愤青孝庄,六安长途汽车站,3级片
这里我们是结合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
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!!
点击进行留言回复
相关文章:
-
-
-
-
-
-
-
HTML入门
HTML概述 HTML: Hyper Text Markup Language 超文本标记语言 超文本: 比普通文本功能更加强大,可以添加各种样式 标记...
[阅读全文]
-
使用HTML设计商城首页
网站首页 需求分析 根据产品文档,完成商城首页,显示效果如图 技术分析 表格标签table table标签 常用的属性: bgcolor : 背景色 w...
[阅读全文]
-
使用HTML设计注册界面
网站注册页面案例 需求分析 编写一个HTML页面, 显示效果如图所示 技术分析 表单标签 action : 直接提交的地址 method : get 方...
[阅读全文]
-
-
网友评论