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 ...
随机推荐
- 自制Https证书并在Spring Boot和Nginx中使用
白话Https一文中, 介绍了Https存在的目的和工作原理,但多是偏向于原理性的介绍,本文介绍如何一步一步自制一个能够通过浏览器认证的Https证书,并讲解在Spring Boot环境和Nginx环 ...
- Flexbox制作CSS布局实现水平垂直居中
Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head> & ...
- String.split()用法以及特殊分隔符注意,ps:|
转载:http://www.cnblogs.com/mingforyou/archive/2013/09/03/3299569.html 在java.lang包中有String.split()方法,返 ...
- 『给它加个壳』纯MarkDown博客阅读体验优化
今天鼓捣了一天纯MarkDown书写的博客样式的美化,事实证明图表较多的MarkDown撰写的博文一样可以展现出非常漂亮的效果.为了让纯MarkDown书写的博客有一个干净舒服的阅读体验,我主要针对博 ...
- C语言学习017:malloc和free
malloc和free都包含在<stdlib.h>头文件中 局部变量由于存储在栈中,一旦离开函数,变量就会被释放,当我们需要将数据持久使用,就需要将数据保存到堆中,而在堆中申请内存空间就需 ...
- WinForm GDI+ 资料收集
UI(User Interface)编程在整个项目开发过程中是个颇为重要的环节,任何好的解决方案若没有良好的用户界面呈现给最终用户,那么就算包含了最先进的技术也不能算是好程序.UI编程体现在两个方面, ...
- <textarea>输入框提示文字
背景 看了过时的资料,花费大把时间,不过也有收获,还是写写吧! 分析 有同学可能想到直接在<textarea>标签内输入帮助文字,但是这又有一个新问题--因为<textarea> ...
- UWP游戏防内存修改器的方法
最近我一直在编写适用于Windows 10商店的游戏.这款游戏比较怕玩家用修改器改金钱,因为这种修改会导致某些内购失效并且损害公平性.于是我把自己见过的三种反修改器的方法给网友们介绍一下. 首先说明一 ...
- C#中考虑为大对象使用弱引用
1.无论怎样尽力,我们总是会使用到某些需要大量内存的数据,而这些内存并不需要经常访问.或许你需要从一个大文件中查找某个特定的值,或者算法需要一个较大的查询表.这时,你也许会采用2中不太好做法:第一种是 ...
- 【C#进阶系列】19 可空值类型
可空值类型,正如字面意义上的,是可以为NULL的值类型. 这个东西存在的意义可以解决比如数据库的的Int可以为NUll的情况,使得处理数据库数据更简单. 实际上可空值类型就是Nullable<T ...