怎么在Asp.netMVC中使用swupload实现多图上传功能-创新互联
本篇文章为大家展示了怎么在Asp.net MVC中使用swupload实现多图上传功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
增城网站建设公司创新互联,增城网站设计制作，有大型网站制作公司丰富经验。已为增城千余家提供企业网站建设服务。企业网站搭建\
外贸营销网站建设要多少钱，请找那个售后服务好的
增城做网站的公司定做！
1. 下载WebUploader
2. 将下载到的压缩包里面的文件复制到自己的项目中
3. 添加引用
4.准备一个放图片的容器和一个上传按钮
5.创建Web Uploader实例并监听事件
var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
$(function () {
var $ = jQuery,
$list = $('#fileList'),
// 优化retina, 在retina下这个值是2
ratio = window.devicePixelRatio || 1,
// 缩略图大小
thumbnailWidth = 90 * ratio,
thumbnailHeight = 90 * ratio,
// Web Uploader实例
uploader;
uploader = WebUploader.create({
// 选完文件后，是否自动上传。
auto: false,
// swf文件路径
swf: applicationPath + '/Script/Uploader.swf',
// 文件接收服务端。
server: applicationPath + '/Home/UpLoadProcess',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#filePicker',
//只允许选择图片
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
// 当有文件添加进来的时候
uploader.on('fileQueued', function (file) {
var $li = $(
'' +
'![]()
' +
'
'
),
$img = $li.find('img');
// $list为容器jQuery实例
$list.append($li);
// 创建缩略图
// 如果为非图片文件，可以不用调用此方法。
// thumbnailWidth x thumbnailHeight 为 100 x 100
uploader.makeThumb(file, function (error, src) {
if (error) {
$img.replaceWith('
不能预览');
return;
}
$img.attr('src', src);
}, thumbnailWidth, thumbnailHeight);
});
// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function (file, percentage) {
var $li = $('#' + file.id),
$percent = $li.find('.progress span');
// 避免重复创建
if (!$percent.length) {
$percent = $('
')
.appendTo($li)
.find('span');
}
$percent.css('width', percentage * 100 + '%');
});
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on('uploadSuccess', function (file, response) {
$('#' + file.id).addClass('upload-state-done');
});
// 文件上传失败，显示上传出错。
uploader.on('uploadError', function (file) {
var $li = $('#' + file.id),
$error = $li.find('div.error');
// 避免重复创建
if (!$error.length) {
$error = $(' ').appendTo($li);
}
$error.text('上传失败');
});
// 完成上传完了，成功或者失败，先删除进度条。
uploader.on('uploadComplete', function (file) {
$('#' + file.id).find('.progress').remove();
});
//所有文件上传完毕
uploader.on("uploadFinished", function ()
{
//提交表单
});
//开始上传
$("#ctlBtn").click(function () {
uploader.upload();
});
//显示删除按钮
$(".cp_img").live("mouseover", function ()
{
$(this).children(".cp_img_jian").css('display', 'block');
});
//隐藏删除按钮
$(".cp_img").live("mouseout", function () {
$(this).children(".cp_img_jian").css('display', 'none');
});
//执行删除方法
$list.on("click", ".cp_img_jian", function ()
{
var Id = $(this).parent().attr("id");
uploader.removeFile(uploader.getFile(Id,true));
$(this).parent().remove();
});
});
上述内容就是怎么在Asp.net MVC中使用swupload实现多图上传功能，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。
