1、必须引入的文件
<link href="~/Content/WebUploader/webuploader.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Content/WebUploader/webuploader.js"></script>
2、页面HTML代码
<div id="uploader" class="wu-example">
<div class="btns">
<div id="picker">选择文件</div>
<button id="ctlBtn" class="btn btn-default" onclick="javascript:uploader.upload();">开始上传</button>
</div><!--用来存放文件信息-->
<div id="thelist" class="uploader-list"></div>
</div>
3、初始化配置信息
var $ = jQuery,
$list = $('#thelist'),
$btn = $('#ctlBtn'),
uploader;
uploader= WebUploader.create({
// 选完文件后，是否自动上传。
auto: false,
// swf文件路径
swf: '/Content/WebUploader/Uploader.swf',
// 文件接收服务端。
server: '/WebUploader/Uploader',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#picker',
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: false,
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
},
// 开起分片上传。
chunked: true
});
4、插件常用的事件
//显示用户选择,由于webuploader不处理UI逻辑，所以需要去监听fileQueued事件来实现。
// 当有文件被添加进队列的时候
uploader.on('fileQueued', function (file) {
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail">' +
'<img>' +
'<div>' + file.name + '</div>' +
'</div>'
),
$img = $li.find('img');
// $list为容器jQuery实例
$list.append($li);
// 创建缩略图
// 如果为非图片文件，可以不用调用此方法。
// thumbnailWidth x thumbnailHeight 为 100 x 100
uploader.makeThumb(file, function (error, src) {
if (error) {
alert("不能预览");
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr('src', src);
}, 100, 100);
});
//文件上传进度
//文件上传中，Web Uploader会对外派送uploadProgress事件，其中包含文件对象和该文件当前上传度。
// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function (file, percentage) {
var $li = $('#' + file.id),
$percent = $li.find('.progress .progress-bar');
// 避免重复创建
if (!$percent.length) {
$percent = $('<div class="progress progress-striped active">' +
'<div role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo($li).find('.progress-bar');
}
$li.find('p.state').text('上传中');
$percent.css('width', percentage * 100 + '%');
});
//文件成功、失败处理
//文件上传失败会派送uploadError事件，成功则派送uploadSuccess事件。不管成功或者失败，在文件上传完后都会触发uploadComplete事件。
uploader.on('uploadSuccess', function (file, data) {
$('#' + file.id).find('p.state').text('上传成功');
});
uploader.on('uploadError', function (file, data) {
$('#' + file.id).find('p.state').text('上传出错' + data.msg);
});
uploader.on('uploadComplete', function (file) {
$( '#'+file.id ).find('.progress').fadeOut();
});
5、后台采用.NET MVC直接贴代码
public ActionResult Uploader()
{
try
{
var file = Request.Files["file"];
var fileSavePath = Server.MapPath("~/Content/images/");
if (file.ContentLength < 2000000)
{
file.SaveAs(fileSavePath + file.FileName);
return Json(new {success = true, msg = "上传成功"});
}
else
{
return Json(new {success = false, msg = "仅支持2M以下的图片文件"});
}
}
catch (Exception exception)
{
return Json(new {success = false, msg = exception.Message});
}
}
