您的位置：首页 > Web前端 > JQuery

基于jquery的上传插件Uploadify 3.1.1在MVC3中的使用

2012-06-14 14:06 483 查看

Uploadify是JQuery的一个文件上传插件，实现的效果非常不错,目前已经更新到Version3.1.1，官方提供的实例是php版本的，本文将介绍Uploadify在MVC3中的使用，您可以点击以下链接，去官网查看文档，下载Uploadify插件。

下载Uploadify插件

查看文档

下载Uploadify插件，然后按照以下步骤，在MVC3中应用Uploadify3.1.1插件的上传功能吧。

1.创建MVC3工程，本例命名为UploadifyTest

2.把解压后的Uploadify-v3.1文件夹Copy到工程中的Scripts文件夹下。如下图

以上步骤做完以后，开始写代码了。

.cshtml文件中的代码如下：

<link href="/Scripts/uploadify-v3.1/uploadify.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript" src="/Scripts/uploadify-v3.1/jquery.uploadify-3.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('#upload').uploadify({
'formData': { 'folder': 'd:\\' },
'buttonText': '选择文件',
'buttonClass': 'browser',
'removeCompleted': false,
'swf': '/Scripts/uploadify-v3.1/uploadify.swf',
'uploader': '/Home/Upload'

});
});
</script>
<head>
<style type="text/css">
.browser
{
color:White;
}
</style>
</head>
<input type="file" name="upload" id="upload" />

cs文件代码如下：

public class HomeController : Controller {
public ActionResult Index() {
return View();
}
[AcceptVerbs(HttpVerbs.Post)]
public ContentResult Upload(HttpPostedFileBase FileData, string folder) {
string filename = "";
if (null != FileData) {
try {
filename = Path.GetFileName(FileData.FileName);//获得文件名
string fullPathname = Path.Combine(folder, filename);
saveFile(FileData, folder, filename);
} catch (Exception ex) {
filename = ex.ToString();
}
}
return Content(filename);
}

[NonAction]
private bool saveFile(HttpPostedFileBase postedFile, string filepath, string saveName) {
bool result = false;
if (!Directory.Exists(filepath)) {
Directory.CreateDirectory(filepath);
}
try {
postedFile.SaveAs(Path.Combine(filepath, saveName));
result = true;
} catch (Exception e) {
throw new ApplicationException(e.Message);
}
return result;
}
}

上传效果如下：

用到的上传参数说明

'formData': 向后台传递的参数

'buttonText': 上传按钮上显示的文字

'buttonClass': 给上传按钮添加的

class'removeCompleted': 表示在上传完成后是否删除队列中的对应元素。默认是True，即上传完成后就看不到上传文件进度条了。

'swf': swf文件路径

'uploader': 调用后台操作的方法

转自 /article/5150717.html

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

标签：

相关文章推荐

新的分享

章节导航