微客导航 » 文章资讯 » Asp.net MVC使用swupload实现多图片上传功能

Asp.net MVC使用swupload实现多图片上传功能

2024-01-28 12:00:02 164

本文实例为大家分享了swupload实现多图片上传的具体代码，供大家参考，具体内容如下

1.下载WebUploader

2.将下载到的压缩包里面的文件复制到自己的项目中

3.添加引用

4.准备一个放图片的容器和一个上传按钮

5.创建WebUploader实例并监听事件



varapplicationPath=window.applicationPath===""?"":window.applicationPath||"../../";
$(function(){
var$=jQuery,
$list=$('#fileList'),
//优化retina,在retina下这个值是2
ratio=window.devicePixelRatio||1,
//缩略图大小
thumbnailWidth=90*ratio,
thumbnailHeight=90*ratio,
//WebUploader实例
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); //创建缩略图 //如果为非图片文件，可以不用调用此方法。 //thumbnailWidthxthumbnailHeight为100x100 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('.progressspan'); //避免重复创建 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() { varId=$(this).parent().attr("id"); uploader.removeFile(uploader.getFile(Id,true)); $(this).parent().remove(); }); });

6在Controller里新建一个Action用于保存图片并返回图片路径（这方法是eflay前辈博客上说的）

publicActionResultUpLoadProcess(stringid,stringname,stringtype,stringlastModifiedDate,intsize,HttpPostedFileBasefile)
{
stringfilePathName=string.Empty;

stringlocalPath=Path.Combine(HttpRuntime.AppDomainAppPath,"Upload");
if(Request.Files.Count==0)
{
returnJson(new{jsonrpc=2.0,error=new{code=102,message="保存失败"},id="id"});
}

stringex=Path.GetExtension(file.FileName);
filePathName=Guid.NewGuid().ToString("N")+ex;
if(!System.IO.Directory.Exists(localPath))
{
System.IO.Directory.CreateDirectory(localPath);
}
file.SaveAs(Path.Combine(localPath,filePathName));

returnJson(new
{
jsonrpc="2.0",
id=id,
filePath="/Upload/"+filePathName
});

}

这样就大功告成了。

由于是第一次写博客，里面如果有写的不详细或不对的地方，欢迎大家指点。希望能和大家一起进步。

源码下载：swupload实现多图片上传

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

Asp.net MVC使用swupload实现多图片上传功能

热门推荐

随机推荐