Jquery plupload上传笔记(修改版)
找一个好的上传插件不容易啊,最近看好一个上传插件,查了些网上质料,自己做了些改动,记录下来,来彰显自己曾经屌丝过,这插件还不错,支持多个上传和预览
首先引用,发现有的时候想学点新的东西,不过时间久了也经不住时光的消磨啊,把但是研究好的立马记录下来,我想比自己想研究的时候在回想会有用深刻的多
<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上传笔记(修改版)的更多相关文章
- jquery plupload上传插件
http://www.jianshu.com/p/047349275cd4 http://www.cnblogs.com/2050/p/3913184.html demo地址: http://chap ...
- plupload上传视频插件jQuery+php
我在网上找到一个很好的视频上传插件,经过我的一些整理.补充,在这里分享给大家. 这个视频插件是新浪微博plupload上传视频插件,支持格式有mpg,m4v,mp4,flv,3gp,mov,avi,r ...
- Plupload上传插件简单整理
Plupload Plupload是有TinyMCE的开发者开发的,为您的内容管理系统或是类似上传程序提供一个高度可用的上传插件.Plupload 目前分为一个核心API 和一个jQuery上传队列部 ...
- 20款最好的jQuery文件上传插件
当它是关于开发网络应用程序和网页的时候,文件上传功能的重要性是不容忽视的.一个文件上传功能可以让你上传所有类型的文件在网站上,包括视频,图像,文件和更多.创建一个文件上传功能,对你的网站是不是很难,有 ...
- plupload上传整个文件夹
大容量文件上传早已不是什么新鲜问题,在.net 2.0时代,HTML5也还没有问世,要实现这样的功能,要么是改web.config,要么是用flash,要么是用一些第三方控件,然而这些解决问题的方法要 ...
- plupload上传大文件
大容量文件上传早已不是什么新鲜问题,在.net 2.0时代,HTML5也还没有问世,要实现这样的功能,要么是改web.config,要么是用flash,要么是用一些第三方控件,然而这些解决问题的方法要 ...
- IE8/9 JQuery.Ajax 上传文件无效
IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...
- 强大的支持多文件上传的jQuery文件上传插件Uploadify
支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...
- jQuery文件上传插件Uploadify(转)
一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列. 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用. 由于官方提供的版本是flash免费,html5 ...
随机推荐
- Fort.js – 时尚、现代的表单填写进度提示效果
Fort.js 是一款用于时尚.现代的表单填写进度提示效果的 JavaScript 库,你需要做的就是添加表单,剩下的任务就交给 Fort.js 算法了,使用非常简单.提供了Default.Gradi ...
- Sass细节一变量
同步发布在个人站 变量 局部变量和全局变量的定义 Sass的变量是用$申明的,有局部变量(选择器内部的变量)和全局变量(不在任何选择器内的变量).例如: //这里$width就是全局变量 $width ...
- 我如何调优SQL Server查询
我是个懒人,我只想干尽可能少的活.当我干活的时候我不想太多.是,你没看错,这看起来很糟糕,作为一个DBA这很不合格.但在今天的文章里,我想给你展示下,当你想对特定查询创建索引设计时,你如何把你的工作和 ...
- web框架--flask
flask介绍 Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收http请求并对请求 ...
- img[src*="same"]{}
假如你有一组图片,你想选择其中一些名字中带有same的图片,那么你就可以用这种写法,这里的意思就是选择所有正确路径下名字中带有same的图片文件. 譬如说:me_same.png,you_same.p ...
- ASP.NET MVC系列:添加视图
虽然在上一篇文章中我们知道通过控制器可以在浏览器输出HTML页面,但是这不是控制器主要干的事,因为页面上我为还要做很多好看的特效,页面展示的事情当然交给视图来做了:下面我们就来看看如何添加一个视图 添 ...
- 线程池ThreadPool的初探
一.线程池的适用范围 在日常使用多线程开发的时候,一般都构造一个Thread示例,然后调用Start使之执行.如果一个线程它大部分时间花费在等待某个事件响应的发生然后才予以响应:或者如果在一定期间内重 ...
- VS2015如何新建MVC空模版项目
直接看图吧:
- QT添加二次确认功能,QMessageBox的使用
对于一些重要的操作需要让用户再次确认一次,给出几个基本的实例 是和否 switch( QMessageBox::warning(NULL, "warning",QString::f ...
- ASP.NET MVC 请求流程
一.应用程序启动 1.Application_Start方法,程序启动 2.RegisterRoutes方法,注册路由 3.System.Web.Mvc.RouteCollectionExtensio ...