找一个好的上传插件不容易啊,最近看好一个上传插件,查了些网上质料,自己做了些改动,记录下来,来彰显自己曾经屌丝过,这插件还不错,支持多个上传和预览

首先引用,发现有的时候想学点新的东西,不过时间久了也经不住时光的消磨啊,把但是研究好的立马记录下来,我想比自己想研究的时候在回想会有用深刻的多

<link href="~/css/plupload.css" rel="stylesheet" />@*plupload上传*@
<script src="~/Plupload/jquery.plupload.queue.min.js"></script>
<script src="~/Plupload/plupload.min.js"></script>
<script src="~/Plupload/plupload.flash.min.js"></script>
html代码
 <div id='radioDigs'>
<div id="radioDig" title="选择你要上传的路径" style="width:auto;height:250px;padding:10px;">
<h5></h5>
</div>
</div>
<br/>
<div class="NewP" style="text-align:center;width:80%;">
<table style="text-align:center;width:100%;">
<tr>
<td><h5>您选择的上传路径为 : <span class='pathExplin'></span></h5></td>
<td><a href="#" class='newExplin' iconCls="icon-undo">重新选择上传路径</a></td>
</tr>
</table>
</div>
<br/>
<div id="flash_uploader" style="width: 850px; height: 500px;"> </div>
<div id="thumbnails"></div>
<script type="text/javascript">
var radioValue;//用于动态的获取单选框选中的值
function NewPlupload(){//重新选择上传路径
$('#radioDig').dialog({
modal:true,
onClose:function(){
radioValue = $('[name=ruploads]:checked').val();
PluploadShow();
}
});
}
$(function () {
$.ajax({
url:"/Home/Uploads",
//data:{},
type:"GET",
dataType:"text",
success:function(data,status){
$("#radioDig h5").html(data);//获取单项按钮
}
});
$('#radioDig').dialog({
modal:true,
buttons:[{
text:'保存',
iconCls:'icon-ok',
//left:50,
handler:function(){
radioValue = $('[name=ruploads]:checked').val();
PluploadShow();
$('#radioDig').dialog("close");
}
},{
text:'取消',
iconCls:'icon-no',
//left:50,
handler:function(){
$('#radioDig').dialog("close");
}
}]
});
$.messager.show({
title: "温馨提示",
msg: "上传图片尽量上传大小一致标准化的图片,以便修改!",
showType: 'show',
timeout: 5000
});
$(".NewP .newExplin").click(function(){
NewPlupload();
}).linkbutton({
plain:true
});
});
function PluploadShow(){//上传界面
$(".NewP .pathExplin").text(radioValue);
// 初始化Flash上传插件
$("#flash_uploader").pluploadQueue({
runtimes: 'flash', //使用Flash插件
url: '/Home/Uploadify/Upload', //服务器端响应页面
max_file_size: '10mb', //最大文件限制
file_size: '1mb', //一次上传数据大小
multipart_params: { "path": radioValue},  //传到后台的参数
unique_names: true, //是否自动生成唯一名称
filters: [ //文件类型限制
{ title: "图片文件", extensions: "jpg,gif,png,ico" },
{ title: "压缩文件", extensions: "zip,rar" }
],
//resize: { width: 320, height: 240, quality: 80 },// 压缩图片的大小
// SWF文件位置
flash_swf_url: '/Plupload/plupload.flash.swf',
init: {
FileUploaded: function (up, file, info) {
if (info.response != null) {
var jsonstr = eval("(" + info.response + ")");
for(var i = 0; i<jsonstr.length;i++){
var thumbnailUrl = jsonstr[i].thumbnailUrl;
var originalUrl = jsonstr[i].originalUrl;//上传完整路径
var name = jsonstr[i].name;//图片名
//一个文件上传成功
addImage(name, originalUrl, thumbnailUrl);
}
}
},
Error: function (up, args) {
//发生错误
if (args.file) {
alert('文件错误:' + args.file);
} else {
alert('出错' + args);
}
}
}
});
}
</script>

上传类(ServiceUpload)

 /// <summary>
/// 取得缩略图。
/// </summary>
public void OutputThumbnail()
{
HttpContext context = HttpContext.Current;
//string imageName = context.Request.QueryString["ThumbnailId"] as string;
//if (imageName != null)
//{
List<ThumbnailInfo> thumbnails = (List<ThumbnailInfo>)context.Session["thumbnails"];
// List<ThumbnailInfo> thumbnails = context.Session["thumbnails"] as List<ThumbnailInfo>;
if (thumbnails != null)
{
foreach (ThumbnailInfo thumbnail in thumbnails)
{
//if (thumbnail.Id == imageName)
//{
context.Response.ContentType = "image/jpeg";
context.Response.BinaryWrite(thumbnail.Data);
context.Response.End();
return;
//}
}
} //}
context.Response.StatusCode = ;
context.Response.Write("没有创建");
context.Response.End();
} #endregion
/// <summary>
/// 上传图片
/// </summary>
/// <returns></returns>
public void UploadImage(string path)
{
HttpContext context = HttpContext.Current;
string uploadPath =context.Request.MapPath(path);//图片上传的路径
string thumbsImagePath = uploadPath;
// string uploadFileUrl = PathConfig.UploadUrl(); //上传文件的URL
HttpPostedFile uploadFile = context.Request.Files["file"];
try
{
//验证文件夹是否存在
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
} string fileName = DateTime.Now.ToString("yyyyMMddHHmmssfff"); string imagePath = uploadPath + fileName + ".Jpeg";
Image originalImg = Image.FromStream(uploadFile.InputStream);
originalImg.Save(imagePath, System.Drawing.Imaging.ImageFormat.Jpeg); Image thumbnail = ImageProcess.MakeThumbnail(originalImg, , , ThumbnailMode.ByWidth);//略缩图
string thumbsPath = uploadPath + fileName + "-Thumbs.Jpeg";
thumbnail.Save(thumbsPath, System.Drawing.Imaging.ImageFormat.Jpeg); MemoryStream thumbsStream = ImageProcess.MakeThumbnail(originalImg, , );
ThumbnailInfo thumbnailInfo = new ThumbnailInfo(fileName, thumbsStream.GetBuffer());
thumbsStream.Close(); List<ThumbnailInfo> thumbnails = (List<ThumbnailInfo>)context.Session["thumbnails"];
if (thumbnails == null)
{
thumbnails = new List<ThumbnailInfo>();
context.Session["thumbnails"] = thumbnails;
}
thumbnails.Add(thumbnailInfo);
context.Session["thumbnails"] = thumbnails;
context.Session["path"] = thumbsPath;//自加属性
context.Response.StatusCode = ;
context.Response.Write("[{'name':'" + fileName + "','originalUrl':'" + PathConfig.GetVirtualPath(imagePath) + "','thumbnailUrl':'" + PathConfig.GetVirtualPath(thumbsPath) + "'}]"); }
catch
{
context.Response.StatusCode = ;
context.Response.Write("发生了一个错误");
context.Response.End();
}
}

略缩图类(ThumbnailInfo)

 [Serializable]
public class ThumbnailInfo
{ #region Fields... #endregion #region Constructors... /// <summary>
/// 初始化 <see cref="ThumbnailInfo"/> 类的新实例。
/// </summary>
public ThumbnailInfo()
{ } /// <summary>
/// 初始化 <see cref="ThumbnailInfo"/> 类的新实例。
/// </summary>
public ThumbnailInfo(string id, byte[] data)
{
Id = id;
Data = data;
} #endregion #region Properties... /// <summary>
/// 获取或设置缩略图的编号。
/// </summary>
public string Id { get; set; } /// <summary>
/// 获取或设置缩略图的数据。
/// </summary>
public byte[] Data { get; set; }
}
}

后台代码,界面也是一个ui框架,自己写那是要死了,毕竟不是专业html的,此时功力还尚浅

 public string Uploads()//上传按钮
{
List<Upload> list = oMan.GetUploads();
StringBuilder result = new StringBuilder();
string c = "checked='checked'";//默认第一个选中
foreach (Upload u in list)
{
result.Append("<input type='radio' name='ruploads' " + c + " value='" + u.UploadPath + "'/> " + u.UploadName + "<br/>");
if (c != "")
c = "";
}
return result.ToString();
}
public void Uploadify(string id)//上传处理
{
string path = "";
if(Request.Params["path"] != null)
path = Request.Params["path"].ToString();//上传路径
else if (Session["path"] != null)
path = Session["path"].ToString();//上传路径
string act = id;//上传资源类型
switch (act)
{
case "Upload":
new ServiceUpload().UploadImage(path);
break;
case "Thumbnail":
new ServiceUpload().OutputThumbnail();
break;
default:
new ServiceUpload().UploadImage(path);
break;
} }

Jquery plupload上传笔记(修改版)的更多相关文章

  1. jquery plupload上传插件

    http://www.jianshu.com/p/047349275cd4 http://www.cnblogs.com/2050/p/3913184.html demo地址: http://chap ...

  2. plupload上传视频插件jQuery+php

    我在网上找到一个很好的视频上传插件,经过我的一些整理.补充,在这里分享给大家. 这个视频插件是新浪微博plupload上传视频插件,支持格式有mpg,m4v,mp4,flv,3gp,mov,avi,r ...

  3. Plupload上传插件简单整理

    Plupload Plupload是有TinyMCE的开发者开发的,为您的内容管理系统或是类似上传程序提供一个高度可用的上传插件.Plupload 目前分为一个核心API 和一个jQuery上传队列部 ...

  4. 20款最好的jQuery文件上传插件

    当它是关于开发网络应用程序和网页的时候,文件上传功能的重要性是不容忽视的.一个文件上传功能可以让你上传所有类型的文件在网站上,包括视频,图像,文件和更多.创建一个文件上传功能,对你的网站是不是很难,有 ...

  5. plupload上传整个文件夹

    大容量文件上传早已不是什么新鲜问题,在.net 2.0时代,HTML5也还没有问世,要实现这样的功能,要么是改web.config,要么是用flash,要么是用一些第三方控件,然而这些解决问题的方法要 ...

  6. plupload上传大文件

    大容量文件上传早已不是什么新鲜问题,在.net 2.0时代,HTML5也还没有问世,要实现这样的功能,要么是改web.config,要么是用flash,要么是用一些第三方控件,然而这些解决问题的方法要 ...

  7. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  8. 强大的支持多文件上传的jQuery文件上传插件Uploadify

    支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...

  9. jQuery文件上传插件Uploadify(转)

    一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列. 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用. 由于官方提供的版本是flash免费,html5 ...

随机推荐

  1. 在Android中实现service动态更新UI界面

    之前曾介绍过Android的UI设计与后台线程交互,据Android API的介绍,service一般是在后台运行的,没有界面的.那么如何实现service动态更新UI界面呢?案例:通过service ...

  2. 经验总结:HTTP返回505错误小记

    昨天调试代码的时候,用http请求一个图片,返回的结果为如下: HTTP/1.1 505 HTTP Version Not Supported Server: Apache-Coyote/1.1 Da ...

  3. 【Swift学习】Swift编程之旅---集合类型之字典(八)

    字典是一种存储相同类型多重数据的存储器.每个值(value)都关联独特的键(key),键作为字典中的这个值数据的标识符.和数组中的数据项不同,字典中的数据项并没有具体顺序. 字典写作Dictionar ...

  4. 【转载】那些年我们一起清除过的浮动demo

    返回文章:那些年我们一起清除过的浮动 闭合浮动 与 清除浮动 的区别 .main:很抱歉,现代浏览器中我没能把warp撑高(float:left) .side:我也浮动了(float:left) .f ...

  5. C语言学习016:单链表

    #include <stdio.h> //定义一个链表,链表是一种递归结构,在定义的时候必须要给结构起一个名字 typedef struct folder{ int level; char ...

  6. C# 解析html —— 将html转为XHTML,然后利用Xml解析

    呵呵,由于正则不熟,所以另谋出路——利用XML去解析html. 要想将抓取到的数据(直接抓取到的是byte[])  转为XML文档(即XMLDocument对象),有两个要点: 一.判断编码(http ...

  7. HTTP & HTTPs

    HTTP HTTP 消息 HTTP 方法 参考 [1]. HTTP 协议初识 - 阮一峰: HTTPS 参考 [1]. HTTPS 升级指南 - 阮一峰:

  8. Retrieving Out Params From a Stored Procedure With Python

    http://www.rodneyoliver.com/blog/2013/08/08/retrieving-out-params-from-a-stored-procedure-with-pytho ...

  9. mysql和oracle jdbc连接

    加载驱动. Class.forName("oracle.jdbc.driver.OracleDriver"); 1 创建连接. Connection con = DriverMan ...

  10. 框架SpringMVC笔记系列 一 基础

    主题:SpringMVC 学习资料参考网址: 1.http://www.icoolxue.com 2.http://aokunsang.iteye.com/blog/1279322 1.SpringM ...