在这之前在感谢园子好多大牛的文章,在这里就不列出来了。

进入正题。

svn检索https://github.com/moxiecode/plupload 获取到代码,这篇文章使用的是v2.1.8

主要功能:

1、多文件上传

2、分片上传

3、显示进度条

先看看项目结构

<style>
.trip-uploader .webuploader-container { float: left; position: relative; width: 20%; display: block; line-height: 1.4; background: #fff; border: 1px dashed #D2D1D6; border-radius: 6px; color: #ccc; padding: 15px 0; font-size: 13px; text-align: center; margin: 4px; cursor: pointer; }
.webuploader-pick { width: 100%; display: block; cursor: pointer; overflow: hidden; }
.trip-uploader .webuploader-container .icon-plus { width: 32px; height: 32px; display: block; margin: 10px auto; background: url(/images/upimagedefault.png) no-repeat; background-size: 32px; }
.upload-btn { position: absolute; top: 0px; left: 0px; width: 100%; height: 98%; overflow: hidden; z-index:; }
.file-item { width: 120px; height: 120px; float: left; position: relative; margin: 0 0 10px; padding: 4px; padding: 4px; line-height: 1.42857143; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; -webkit-transition: border .2s ease-in-out; -o-transition: border .2s ease-in-out; transition: border .2s ease-in-out; }
.fancybox { display: block; overflow: hidden; background: #eee; height: 120px; }
.file-item img { height: 110px; }
.file-item .progress { position: absolute; right: 4px; bottom: 4px; left: 4px; height: 4px; overflow: hidden; z-index:; margin:; padding:; border-radius:; background: 0 0; }
.file-item .progress span { display: block; overflow: hidden; width:; height: 100%; background: url(/images/progress.png) repeat-x #06BD01; -webit-transition: width .2s linear; -moz-transition: width .2s linear; -o-transition: width .2s linear; -ms-transition: width .2s linear; transition: width .2s linear; -webkit-animation: progressmove 2s linear infinite; -moz-animation: progressmove 2s linear infinite; -o-animation: progressmove 2s linear infinite; -ms-animation: progressmove 2s linear infinite; animation: progressmove 2s linear infinite; -webkit-transform: translateZ(0); }
</style>
<form id="form1" runat="server">
<div>
<div class="trip-uploader" style="height: 160px;">
<div class="uploader-images-list">
</div>
<div class="webuploader-container">
<div id="coverPicker" class="webuploader-pick webuploader-pick-hover" style="position: relative;">
<i class="icon icon-plus"></i>上传图片<br />
(最多N张)
</div>
<div id="imgupload" class="upload-btn"></div>
</div>
</div>
</div>
</form>
 <script>
var $list = $(".uploader-images-list");
var uploader = new plupload.Uploader({ //实例化一个plupload上 传对象
browse_button: 'imgupload',
runtimes: 'html5,flash,silverlight,html4',
url: '/Core/UploadHandler.ashx',
flash_swf_url: '/js/plupload/Moxie.swf',
silverlight_xap_url: '/js/plupload/Moxie.xap',
filters: {
mime_types: [ //只允许上传图片文件
{ title: "图片文件", extensions: "jpg,gif,png" }
]
}
, prevent_duplicates: !1
, max_file_size: '10mb'
, chunk_size: '1mb'//分片上传一定要注意压缩的大小
//, resize: { width: 320, height: 240, quality: 90 }
, init:
{
PostInit: function (a) {
console.log("初始化完毕");
},
FilesAdded: function (uder, files) {
console.log("添加进队列");
for (var i = 0; i < files.length; i++) {
var file = files[i];
appendimg(file.id);
}
uder.start();
},
BeforeUpload: function (uder, files) {
console.log("开始上传");
},
UploadProgress: function (uder, file) {
console.log("进度:[百分比:" + file.percent + ",状态:" + file.status + ",原始大小:" + file.origSize + ",已传:" + file.loaded + "]");
progress(file.id, file.percent);
},
UploadFile: function (uder) {
console.log(uder.id + "开始上传");
},
FileUploaded: function (uder, file, resObject) {
var result = resObject.response;
console.log("上传完成" + result);
var $fileitem = $("." + file.id)
$fileitem.find("img").attr("src", JSON.parse(result).data);
//移除进度条
$fileitem.find(".progress").remove();
},
ChunkUploaded: function (a, b, c) {
console.log("小片上传完成后");
},
UploadComplete: function (uder, files) {
alert("上传完毕");
},
Error: function () {
alert("ERROR");
}
} });
uploader.init(); //初始化 function appendimg(id, imgurl) {
var html = ' <div class="' + id + ' file-item"><a class="fancybox"> <img /> </a> </div>';
$(".uploader-images-list").append(html);
}
function progress(id, percent) {
var c = $list.find("." + id);
var d = c.find(".progress span");
d.length || (d = $('<p class="progress"><span></span></p>').appendTo(c).find("span"));
d.css("width", percent + "%")
} </script>

下面的是后台代码:

   /// <summary>
/// BaseHandler 的摘要说明
/// </summary>
public class BaseHandler : IHttpHandler, IRequiresSessionState
{
public HttpRequest Request
{
get
{
return HttpContext.Current.Request;
}
}
public HttpResponse Response
{
get
{
return HttpContext.Current.Response;
}
}
public void ProcessRequest(HttpContext context)
{
var data = ProcessResponse(context);
var newData = new { code = data.code, data = data.data, msg = data.msg };
context.Response.ContentType = "application/json";
string jsonData = JsonConvert.SerializeObject(newData);
context.Response.Write(jsonData);
}
/// <summary>
/// 定义输出函数
/// </summary>
/// <returns></returns>
protected virtual ResponseData ProcessResponse(HttpContext context)
{
ResponseData data = new ResponseData { code = ReturnCode.error, data = "" };
return data;
} public bool IsReusable
{
get
{
return false;
}
}
}
/// <summary>
/// 返回值
/// </summary>
public struct ResponseData
{
/// <summary>
/// 返回的状态码
/// </summary>
public ReturnCode code;
/// <summary>
/// 返回状态码对应的消息
/// </summary>
public string msg;
/// <summary>
/// 附加内容
/// </summary>
public object data;
}
/// <summary>
/// 操作代码 返回给前台JS
/// </summary>
public enum ReturnCode
{
/// <summary>
/// 失败 0
/// </summary>
error = ,
/// <summary>
/// 成功 1
/// </summary>
success = ,
/// <summary>
/// 其他 ,自定义状态 返回9
/// </summary>
other =
}

基类BaseHandler.ashx

 public class UploadHandler : BaseHandler
{
ResponseData responseData = new ResponseData()
{
code = ReturnCode.error,
msg = "未配置",
data = null
};
protected override ResponseData ProcessResponse(HttpContext context)
{
Response.CacheControl = "no-cache";
string dir = GetUploadPath();
if (Request.Files.Count > )
{
try
{
for (int j = ; j < Request.Files.Count; j++)
{
int offset = Convert.ToInt32(Request["chunk"]); //当前分块
int total = Convert.ToInt32(Request["chunks"]);//总的分块数量
string name = Request["name"];
HttpPostedFile uploadFile = Request.Files[j];
if (total == )
{
if (uploadFile.ContentLength > )
{
string extname = Path.GetExtension(uploadFile.FileName);//.jpg
string filename = uploadFile.FileName; //xx.jpg
string path = dir + RndNum() + extname;
uploadFile.SaveAs(context.Server.MapPath(path));
responseData.msg = "上传成功";
responseData.data = path;
}
}
else
{
//文件 分成多块上传
string tempPath = WriteTempFile(uploadFile, offset);
if (total - offset == )
{
//如果是最后一个分块文件 ,则把文件从临时文件夹中移到上传文件夹中 string extname = Path.GetExtension(name);//.jpg
string newPath = dir + RndNum() + extname;
System.IO.FileInfo fi = new System.IO.FileInfo(context.Server.MapPath(tempPath));//临时文件名
//把临时文件移动到新目录并重名
fi.MoveTo(context.Server.MapPath(newPath));
responseData.msg = "上传成功";
responseData.data = newPath;
}
else
{
responseData.msg = "上传成功";
responseData.data = tempPath;
}
}
}
}
catch (Exception ex)
{
responseData.msg = ex.Message;
responseData.data = ex.ToString();
} }
return responseData;
} /// <summary>
/// 保存临时文件-返回相对路径
/// </summary>
/// <param name="uploadFile">文件流</param>
/// <param name="chunk">第几个分块 从0开始</param>
/// <param name="context"></param>
/// <returns></returns>
private string WriteTempFile(HttpPostedFile uploadFile, int chunk)
{
string tempPath = GetTempPath() + uploadFile.FileName + ".part"; //临时相对路径
string saveTempPath = HttpContext.Current.Server.MapPath(tempPath);
if (chunk == )
{
uploadFile.SaveAs(saveTempPath); //如果是第一个分块,则直接保存
}
else
{
//如果是其他分块文件 ,则原来的分块文件,读取流,然后文件最后写入相应的字节
FileStream fs = new FileStream(saveTempPath, FileMode.Append);
if (uploadFile.ContentLength > )
{
int FileLen = uploadFile.ContentLength;
byte[] input = new byte[FileLen];
System.IO.Stream MyStream = uploadFile.InputStream;
MyStream.Read(input, , FileLen);
fs.Write(input, , FileLen);
fs.Close();
}
} return tempPath;
} /// <summary>
/// 该方法用于生成指定位数的随机数
/// </summary>
/// <param name="VcodeNum">参数是随机数的位数</param>
/// <returns>返回一个随机数字符串</returns>
public string RndNum(int VcodeNum)
{
string Vchar = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,g,h,i,j,k,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";
//string Vchar = "0,1,2,3,4,5,6,7,8,9";
string[] VcArray = Vchar.Split(',');//拆分成数组 string VNum = "";
seed++;
Random rand = new Random(seed);
for (int i = ; i < VcodeNum; i++)
{
VNum += VcArray[rand.Next(VcArray.Length - )];
}
return VNum;
}
private static int _seed = int.Parse(DateTime.Now.Ticks.ToString().Substring());
private static int seed { get { return _seed; } set { _seed = value; } } //获取存放路径
public static string GetUploadPath()
{
string path = HttpContext.Current.Server.MapPath("/upload/");
if (!System.IO.Directory.Exists(path))
{
System.IO.Directory.CreateDirectory(path);
}
return "/upload/";
}
/// <summary>
/// 获取临时目录 相对路径
/// </summary>
/// <returns></returns>
public static string GetTempPath()
{
string path = GetUploadPath();
path = HttpContext.Current.Server.MapPath("/upload/temp/");
if (!System.IO.Directory.Exists(path))
{
System.IO.Directory.CreateDirectory(path);
}
return "/upload/temp/";
}
}

上传类UploadHandler.ashx

源代码:

demoPlupload

plupload 上传组件的使用的更多相关文章

  1. Plupload上传组件 + javaweb实现上传源码以及DEMO

    Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度.图像自动缩略和上传分块.可同时上传多个文件: 上网找了很多Plupload的DEMO都无法正常使用, 而且Pluploa ...

  2. 前端上传组件Plupload使用指南

    我之前写过一篇文章<文件上传利器SWFUpload使用指南>,里面介绍了上传组件SWFUpload的使用方法,但现在随着html5技术的逐渐推广和普及,再去使用以flash为上传手段的SW ...

  3. Plupload文件上传组件使用API

    Plupload有以下功能和特点: 1.拥有多种上传方式:HTML5.flash.silverlight以及传统的<input type=”file” />.Plupload会自动侦测当前 ...

  4. 【转】前端上传组件Plupload

    [转自博客园-无双] html5原生的给我们提供了文件上传的API,Plupload是一款由著名的web编辑器TinyMCE团队开发的上传组件,简单易用且功能强大,我们完全可以使用Plupload来代 ...

  5. 【转】前端上传组件Plupload使用指南

    http://www.cnblogs.com/2050/p/3913184.html Plupload有以下功能和特点: 1.拥有多种上传方式:HTML5.flash.silverlight以及传统的 ...

  6. web 文件上传组件 Plupload

    Plupload官网:点击打开链接   建议下载最新版本号,低版本号会出现浏览器兼容问题. 近期公司有个项目须要在web端使用多文件上传功能.刚開始准备使用HTML5来做.但是IE9下面是都不支持的, ...

  7. [Pulgin] 前端上传组件Plupload使用指南

    我之前写过一篇文章<文件上传利器SWFUpload使用指南>,里面介绍了上传组件SWFUpload的使用方法,但现在随着html5技术的逐渐推广和普及,再去使用以flash为上传手段的SW ...

  8. 前端上传组件 - Plupload

    http://www.cnblogs.com/KTblog/p/4740852.html 效果: 起始界面. ------------- 可以上上传单个文件. ------------- 可以上传多个 ...

  9. Flash上传组件之SWFUpload文件上传

    一.什么是SWFUpload? SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而 ...

随机推荐

  1. installns

    installns 将升级文件NSVPX-NCore_build-12.1-48.13_nc_64.tgz,上传至设备的“/var/nsinstall”目录下. 在命令行中执行以下命令,查看升级脚本使 ...

  2. MT【150】源自斐波那契数列

    (清华2017.4.29标准学术能力测试7) 已知数列$\{x_n\}$,其中$x_1=a$,$x_2=b$,$x_{n+1}=x_n+x_{n-1}$($a,b$是正整数),若$2008$为数列中的 ...

  3. Vue 中使用UEditor富文本编辑器-亲测可用-vue-ueditor-wrap

    其中UEditor中也存在不少错误,再引用过程中. 但是UEditor相对还是比较好用的一个富文本编辑器. vue-ueditor-wrap说明 Vue + UEditor + v-model 双向绑 ...

  4. [UVA 10635] Prince ans Princess

    图片加载可能有点慢,请跳过题面先看题解,谢谢 这道题... 还是要点思维的... 第一眼看是个最长公共子序列,但是, \(N\le 62500\) ,并不能 \(O(n^2)\) 求 $ $ 这道题有 ...

  5. 【bzoj3195】 Jxoi2012—奇怪的道路

    http://www.lydsy.com/JudgeOnline/problem.php?id=3195 (题目链接) 题意 一张$n$个点$m$条边的无向图,每个点度数为偶数,一个点只能向标号与它的 ...

  6. 【数学】【CF1096C】 Polygon for the Angle

    Description 给定一个角度 \(\theta\),请你寻找一个正 \(n\) 边型,满足在这个正 \(n\) 边型上找三个顶点 \(A,B,C\) (可以不相邻),使得 \(\angle A ...

  7. ssl证书生成与验证

    要做这件事情的起因在于,代码的升级包放在一个https的服务器上,我们的设备要实现升级,则是通过wget 获取https上的升级包,并且要实现验证证书的功能,这样可以防止设备被恶意篡改升级成其他文件包 ...

  8. 交互式shell脚本对话框----whiptail指令

    当你在linux环境下setup软件的时候就会有相应的对话框让你输入.虽然我们已经习惯了这种交互的方法,但是如果有一种直观的界面来输入是不是会更加友好和方便呢,在shell脚本中你可以使用-whipt ...

  9. python的list()列表数据类型的方法详解

    一.列表 列表的特征是中括号括起来的,逗号分隔每个元素,列表中的元素可以是数字或者字符串.列表.布尔值......等等所有类型都能放到列表里面,列表里面可以嵌套列表,可以无限嵌套 字符串的特征是双引号 ...

  10. unicode utf8 学习记录

    显示器- unicode -系统- utf8 -存储设备 Unicode是一套复杂的字符编码标准,简单来说就是将人类使用的每个所谓字符与一个非负整数对应,并且保证不同的字符对应的整数一定不同.UTF- ...