您的位置：首页 > 编程语言 > ASP

Asp.net使用ajax无刷新上传文件（附源码）

2010-08-03 16:58 381 查看

原文引用自：/article/5036081.html

利用JQuery插件jquery.ajaxfileupload.js实现无刷新上传文件，插件原理是在文档中创建iframe和form然后在将文件上传到服务器。

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>ajax上传文件</title>
<mce:script type="text/javascript" src="/js/jquery.js" mce_src="js/jquery.js"></mce:script>
<mce:script type="text/javascript" src="/js/jquery.ajaxfileupload.js" mce_src="js/jquery.ajaxfileupload.js"></mce:script>
<mce:script type="text/javascript"><!--
$(function(){
$('#fup').change(function(){
upload();
});
});

function upload(){
$.ajaxFileUpload(
{
url : '/ajaxUpload.aspx?random=' + Math.random(),
secureuri : false,
fileElementId : 'fup',
dataType : 'json',
success: function (data, status)
{
if(data.status == 'success')
{
$('#tmp').attr('src', data.msg.Origin);
$('#tb, #hf').val(data.msg.Origin);
}
else
{
alert(data.msg);
}
},
error: function (data, status, e)
{
alert(data.msg);
alert(status);
alert(e);
}
});

$('#fup').change(function(){
upload();

});
}

// --></mce:script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="fup" runat="server" />
<img id="tmp" />
<asp:TextBox ID="tb" runat="server"></asp:TextBox>
<asp:HiddenField ID="hf" runat="server" />
</div>
</form>
</body>
</html>

后台代码：

protected void Page_Load(object sender, EventArgs e)
{
HttpFileCollection files = Request.Files;
if (files != null && files.Count > 0)
{
HttpPostedFile file = files[0];
string tmpPath = Server.MapPath("/Upload/");
string fileName = Path.GetFileName(file.FileName);
try
{
file.SaveAs(tmpPath + fileName);
Response.Write(@"{
status : 'success',
msg: {
Origin : '" + "/upload/" + fileName + @"'
}
}");
}
catch (Exception ex)
{
Response.Write(@"{
status : 'error',
msg : '" + ex.Message + @"'
}");
Response.End();
}
}

源码：Ajax无刷新上传文件示例源码

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航