精准传达 • 有效沟通
从品牌网站建设到网络营销策划，从策略到执行的一站式服务
怎么在ASP.NETMVC中使用Webuploader实现上传功能-创新互联
这期内容当中小编将会给大家带来有关怎么在ASP.NET MVC中使用Webuploader实现上传功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
成都创新互联主营城口网站建设的网络公司,主营网站建设方案,
重庆APP软件开发,城口h5微信平台小程序开发搭建,城口网站营销推广欢迎城口等地区企业咨询
1.简介：WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。
2.引入资源：使用Web Uploader文件上传需要引入三种资源：JS, CSS, SWF。
3.HTML部分
选择文件
4.JS部分
//初始化上传控件
function initUpload() {
var $ = jQuery;
var $list = $('#thelist');
var uploader = WebUploader.create({
// 选完文件后，是否自动上传。
auto: false,
// swf文件路径
swf: applicationPath + '../Content/scripts/plugins/webuploader/Uploader.swf',
// 文件接收服务端。
server: applicationPath + 'PublicInfoManage/Upload/Upload',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#picker',
chunked: true,//开始分片上传
chunkSize: 2048000,//每一片的大小
formData: {
guid: GUID //自定义参数，待会儿解释
},
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: false
});
// 当有文件被添加进队列的时候
uploader.on('fileQueued', function (file) {
$list.append('' +
'' + file.name + '' +
'等待上传' +
'' +
'' +
'删除' +
'');
});
// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function (file, percentage) {
var $li = $('#' + file.id),
$percent = $li.find('.progress .progress-bar');
// 避免重复创建
if (!$percent.length) {
$percent = $('' +
'' +
'' +
'').appendTo($li).find('.progress-bar');
}
$li.find('span.state').text('上传中');
$percent.css('width', percentage * 100 + '%');
});
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on('uploadSuccess', function (file, response) {
var $li = $('#' + file.id);
//$('#' + file.id).find('p.state').text('已上传');
$.post('../../PublicInfoManage/Upload/Merge', { guid: GUID, fileName: file.name }, function (data) {
$li.find('span.state').html("上传成功");
$li.find('span.filepath').attr("dataValue", 1);
$li.find('span.fileName').attr("dataValue", data.filename);
$li.find('span.fileName').html(data.filename);
$li.find('span.download').html("下载")
$li.find('span.webuploadDelbtn').show();
$li.find('span.filepath').html(data.filepath);
//增加列表存储
files.push(data);
});
});
// 文件上传失败，显示上传出错。
uploader.on('uploadError', function (file, reason) {
$('#' + file.id).find('p.state').text(reason);
});
// 完成上传完了，成功或者失败，先删除进度条。
uploader.on('uploadComplete', function (file) {
$('#' + file.id).find('.progress').fadeOut();
});
//所有文件上传完毕
uploader.on("uploadFinished", function () {
//提交表单
});
//开始上传
$("#ctlBtn").click(function () {
uploader.upload();
});
//删除
$list.on("click", ".webuploadDelbtn", function () {
debugger
var $ele = $(this);
var id = $ele.parent().attr("id");
var file = uploader.getFile(id);
uploader.removeFile(file);
$ele.parent().remove();
//移除数组
var destFile = findFile(file.name)
var index = files.indexOf(destFile);
if (index > -1) {
files.splice(index, 1);
}
});
}5.C# Controller后台处理
///
/// 上传文件
///
///
[HttpPost]
public ActionResult Upload()
{
string fileName = Request["name"];
int lastIndex = fileName.LastIndexOf('.');
string fileRelName = lastIndex == -1? fileName: fileName.Substring(0, fileName.LastIndexOf('.'));
fileRelName = fileRelName.Replace("[", "").Replace("]", "").Replace("{", "").Replace("}", "").Replace(",", "");
int index = Convert.ToInt32(Request["chunk"]);//当前分块序号
var guid = Request["guid"];//前端传来的GUID号
var dir = Server.MapPath("~/Upload/file");//文件上传目录
string currentTime = DateTime.Now.ToString("yyyy-MM-dd");
dir += "\\" + currentTime;
dir = Path.Combine(dir, fileRelName);//临时保存分块的目录
if (!System.IO.Directory.Exists(dir))
System.IO.Directory.CreateDirectory(dir);
string filePath = Path.Combine(dir, index.ToString());//分块文件名为索引名，更严谨一些可以加上是否存在的判断，防止多线程时并发冲突
var data = Request.Files["file"];//表单中取得分块文件
//if (data != null)//为null可能是暂停的那一瞬间
//{
data.SaveAs(filePath);//报错
//}
return Json(new { erron = 0 });//Demo，随便返回了个值，请勿参考
}
上述就是小编为大家分享的怎么在ASP.NET MVC中使用Webuploader实现上传功能了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。
本文题目：怎么在ASP.NETMVC中使用Webuploader实现上传功能-创新互联
标题网址：http://cdkjz.cn/article/cddsdi.html
