===================================================================
2016年netty/mina/java nio视频教程java游戏服务器设计教程
互联网架构师教程：http://blog.csdn.net/pplcheer/article/details/71887910
互联网架构师视频课程 Dubbo ActiveMQ spring Netty MongoDB Jvm :http://blog.csdn.net/pplcheer/article/details/72794970
需要的加qq：1225462853，备注：程序员学习视频
其他视频都可以索要（Netty NET C++ 等等）
===================================================================
在做日常项目中，经常在后台需要上传图片等资源文件，之前使用过几次这个组件，感觉非常好用 ，但是每次使用的时候都是需要经过一番查阅，所以还不如记住在这里，以后使用的时候就翻翻。
基于jquery的文件上传控件，支持ajax无刷新上传，多个文件同时上传，上传进行进度显示，删除已上传文件。
要求使用jquery1.4或以上版本，flash player 9.0.24以上。
有两个版本，一个用flash,一个是html5。html5的需要付费~所以这里只说flash版本的用法。
在此之前，先说明下插件使用流程，该插件是基于jQuery的，所以我们在使用之前需要引用jquery， 那么可以想象，插件的作用就在于在前台将数据提交到后台，让我们通过后台代码来保存前台传入的文件。
首先按下面的步骤来实现一个简单的上传功能。
1 创建Web项目，命名为UploadfyDemo，从官网上下载最新的版本解压后添加到项目中。
2 在项目中添加UploadHandler.ashx文件用来处理文件的上传。
3 在项目中添加UploadFile文件夹，用来存放上传的文件。
根据下引用的路径，应该能知道具体的结构图是怎么样的。
代码下载：http://download.csdn.net/detail/pplsunny/9442929
4 Default.aspx的html页的代码修改如下,该文件可以认为是一个公共的图片上传页面，到时通过使用iframe嵌入到需要用到上传的页面中就行：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="UploadifyDemo.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Uploadify Demo</title>
<link href="js/jquery.uploadify-v2.1.4/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.uploadify-v2.1.4/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.uploadify-v2.1.4/swfobject.js"></script>
<script type="text/javascript" src="js/jquery.uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#custom_file_upload").uploadify({
//uploadify.swf 文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框，默认值：uploadify.swf。
'uploader': 'js/jquery.uploadify-v2.1.4/uploadify.swf',
//后台处理程序的相对路径 。
'script': 'UploadHandler.ashx',
//cancelImg ：选择文件到文件队列中后的每一个文件上的关闭按钮图标，
'cancelImg': 'js/jquery.uploadify-v2.1.4/cancel.png',
//folder ： 上传文件存放的目录 。
//'folder': 'UploadFile/<% = subpathName %>',
'folder': 'UploadFile/',
//文件队列的ID，该ID与存放文件队列的div的ID一致。
'queueID': 'custom-queue',
//设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 。
'auto': false,
//设置为true时可以上传多个文件。
'multi': true,
//设置可以选择的文件的类型，格式如：'*.doc;*.pdf;*.rar' 。
'fileExt': '*.jpg;*jpeg;*.gif;*.png ',
//这个属性值必须设置fileExt属性后才有效，用来设置选择文件对话框中的提示文本，如设置fileDesc为“请选择rar doc pdf文件
'fileDesc': '图片文件 (.JPG, .JPEG, .GIF, .PNG)',
//当允许多文件生成时，设置选择文件的个数，默认值：999 。
'queueSizeLimit': 10,
//允许同时上传的个数 默认值：1 。
'simUploadLimit': 10,
//rollover ： 值为true和false，设置为true时当鼠标移到浏览按钮上时有反转效果。
//sizeLimit ： 上传文件的大小限制 。
//buttonText ： 浏览按钮的文本，默认值：BROWSE 。
'removeCompleted': true,
'onSelectOnce': function (event, data) {
$('#status-message').text(data.filesSelected + ' 个文件加入上传队列');
},
//onCancel : 当点击文件队列中文件的关闭按钮或点击取消上传时触发。该函数有event、queueId、fileObj、data四个参数，前三个参数同onSelect 中的三个参数，
//data对象有两个属性fileCount和allBytesTotal。
//fileCount：取消一个文件后，文件队列中剩余文件的个数。
//allBytesTotal：取消一个文件后，文件队列中剩余文件的大小。
'onCancel': function (event, queueId, fileObj, data) {
$('#status-message').text(data.fileCount + ' 个文件加入上传队列');
},
'onClearQueue': function (event, data) {
$('#status-message').text('请选择要上传的文件:');
},
//onComplete：文件上传完成后触发。该函数有四个参数event、queueId、fileObj、response、data五个参数，前三个参数同上。
//response为后台处理程序返回的值，在上面的例子中为1或0，data有两个属性fileCount和speed
//fileCount：剩余没有上传完成的文件的个数。
//speed：文件上传的平均速率 kb/s
//注：fileObj对象和上面讲到的有些不太一样，onComplete 的fileObj对象有个filePath属性可以取出上传文件的路径。
'onComplete': function (event, queueId, fileObj, response, data) {
alert(response); //这里获取上传后的URL路径，用来在前台显示
},
'onAllComplete': function (event, data) {
$('#status-message').text(data.filesUploaded + ' 个文件已上传');
}
});
$("#Up").click(function () {
if ($("#custom-queue").html() == "") {
alert("请选择要上传的文件");
}
else {
$('#custom_file_upload').uploadifyUpload(null, false); //一个一个传
//$('#custom_file_upload').uploadifyUpload(null, true);//同时传
}
});
$("#Clear").click(function () {
$('#custom_file_upload').uploadifyClearQueue();
});
});
</script>
<style type="text/css">
body{font-size:14px; font-family:微软雅黑;}
#custom-demo .uploadifyQueueItem {
background-color: #FFFFFF;
border: none;
border-bottom: 1px solid #E5E5E5;
font: 11px Verdana, Geneva, sans-serif;
height: 20px;
margin-top: 0;
padding: 10px;
width: 350px;
}
#custom-demo #custom-queue {
border: 1px solid #E5E5E5;
margin-bottom: 10px;
width: 370px;
}
#custom-demo object{
float:left;
}
.button{
float:left;
width:120px;
height:30px;
background-color:#525252;
color:#fff;
border:0;
font-size:14px; font-family:微软雅黑;
cursor:pointer;
margin-right:10px;
_margin-right:7px;
}
</style>
</head>
<body>
<div id="custom-demo" class="demo">
<div class="demo-box">
<div id="status-message">请选择要上传的文件:</div>
<div id="custom-queue"></div>
<input id="custom_file_upload" type="file" name="Filedata" class="button" />
<input type="button" id="Up" name="Up" value="上传" class="button" />
<input type="button" id="Clear" name="Clear" value="清空" class="button" />
</div>
</div>
</body>
</html>
5 UploadHandler类的ProcessRequest方法代码如下：
using System.IO;
using System.Web;
namespace UploadifyDemo
{
/// <summary>
/// Summary description for UploadHandler
/// </summary>
public class UploadHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Charset = "utf-8";
HttpPostedFile file = context.Request.Files["Filedata"];
string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"]);
if (file != null)
{
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
file.SaveAs(Path.Combine(uploadPath, file.FileName));
context.Response.Write("1");
}
else
{
context.Response.Write("0");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
注：
文件上传.NET默认有大小限制，像IIS限制的30M默认请求大小。如果不想修改IIS，又想突破这个大小限制，比如上传1GB大小的文件。
这时修改Web.config即可实现
<?xml version="1.0" encoding="utf-8"?>
<!--
有关如何配置 ASP.NET 应用程序的详细信息，请访问
http://go.microsoft.com/fwlink/?LinkId=169433
-->
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.0" />
<httpRuntime maxRequestLength="1073741824"/>
</system.web>
<!--用于设置文件上传的最大允许大小(单位：bytes)-->
<system.webServer>
<security>
<requestFiltering>
<!--修改服务器允许最大长度(1GB)-->
<requestLimits maxAllowedContentLength="1073741824"/>
</requestFiltering>
</security>
</system.webServer>
</configuration>
上面简单地实现了一个上传的功能，依靠函数uploadify实现，uploadify函数的参数为json格式，可以对json对象的key值的修改来进行自定义的设置，如multi设置为true或false来控制是否可以进行多文件上传，下面就来介绍下这些key值的意思：
uploader ： uploadify.swf 文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框，默认值：uploadify.swf。
script ： 后台处理程序的相对路径 。默认值：uploadify.php
checkScript ：用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径
fileDataName ：设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata
method ： 提交方式Post 或Get 默认为Post
scriptAccess ：flash脚本文件的访问模式，如果在本地测试设置为always，默认值：sameDomain
folder ： 上传文件存放的目录 。
queueID ： 文件队列的ID，该ID与存放文件队列的div的ID一致。
queueSizeLimit ： 当允许多文件生成时，设置选择文件的个数，默认值：999 。
multi ： 设置为true时可以上传多个文件。
auto ： 设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 。
fileDesc ： 这个属性值必须设置fileExt属性后才有效，用来设置选择文件对话框中的提示文本，如设置fileDesc为“请选择rar doc pdf文件
fileExt ： 设置可以选择的文件的类型，格式如：'*.doc;*.pdf;*.rar' 。
sizeLimit ： 上传文件的大小限制 。
simUploadLimit ： 允许同时上传的个数 默认值：1 。
buttonText ： 浏览按钮的文本，默认值：BROWSE 。
buttonImg ： 浏览按钮的图片的路径 。
hideButton ： 设置为true则隐藏浏览按钮的图片 。
rollover ： 值为true和false，设置为true时当鼠标移到浏览按钮上时有反转效果。
width ： 设置浏览按钮的宽度 ，默认值：110。
height ： 设置浏览按钮的高度 ，默认值：30。
wmode ： 设置该项为transparent 可以使浏览按钮的flash背景文件透明，并且flash文件会被置为页面的最高层。 默认值：opaque 。
cancelImg ：选择文件到文件队列中后的每一个文件上的关闭按钮图标，
上面介绍的key值的value都为字符串或是布尔类型，比较简单，接下来要介绍的key值的value为一个函数，可以在选择文件、出错或其他一些操作的时候返回一些信息给用户。
onInit : 做一些初始化的工作。
onSelect ：选择文件时触发，该函数有三个参数
event:事件对象。
queueID：文件的唯一标识，由6为随机字符组成。
fileObj：选择的文件对象，有name、size、creationDate、modificationDate、type 5个属性。onSelectOnce ：在单文件或多文件上传时，选择文件时触发。该函数有两个参数event，data，data对象有以下几个属性：
- fileCount：选择文件的总数。
- filesSelected：同时选择文件的个数，如果一次选择了3个文件该属性值为3。
- filesReplaced：如果文件队列中已经存在A和B两个文件，再次选择文件时又选择了A和B，该属性值为2。
- allBytesTotal：所有选择的文件的总大小。
onCancel : 当点击文件队列中文件的关闭按钮或点击取消上传时触发。该函数有event、queueId、fileObj、data四个参数，前三个参数同onSelect 中的三个参数，data对象有两个属性fileCount和allBytesTotal。
- fileCount：取消一个文件后，文件队列中剩余文件的个数。
- allBytesTotal：取消一个文件后，文件队列中剩余文件的大小。
onClearQueue ：当调用函数fileUploadClearQueue时触发。有event和data两个参数，同onCancel中的两个对应参数。
onQueueFull ：当设置了queueSizeLimit并且选择的文件个数超出了queueSizeLimit的值时触发。该函数有两个参数event和queueSizeLimit。
onError ：当上传过程中发生错误时触发。该函数有event、queueId、fileObj、errorObj四个参数，其中前三个参数同上，errorObj对象有type和info两个属性。
- type：错误的类型，有三种‘HTTP’, ‘IO’, or ‘Security’
- info：错误的描述
onOpen ：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列。该函数有event、queueId、fileObj三个参数，参数的解释同上。
onProgress ：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列，在onOpen之后触发。该函数有event、queueId、fileObj、data四个参数，前三个参数的解释同上。data对象有四个属性percentage、bytesLoaded、allBytesLoaded、speed：
- percentage：当前完成的百分比
- bytesLoaded：当前上传的大小
- allBytesLoaded：文件队列中已经上传完的大小
- speed：上传速率 kb/s
onComplete：文件上传完成后触发。该函数有四个参数event、queueId、fileObj、response、data五个参数，前三个参数同上。response为后台处理程序返回的值，在上面的例子中为1或0，data有两个属性fileCount和speed
- fileCount：剩余没有上传完成的文件的个数。
- speed：文件上传的平均速率 kb/s
注：fileObj对象和上面讲到的有些不太一样，onComplete 的fileObj对象有个filePath属性可以取出上传文件的路径。
onAllComplete：文件队列中所有的文件上传完成后触发。该函数有event和data两个参数，data有四个属性，分别为：
- filesUploaded :上传的所有文件个数。
- errors ：出现错误的个数。
- allBytesLoaded ：所有上传文件的总大小。
- speed ：平均上传速率 kb/s
相关函数介绍
在上面的例子中已经用了uploadifyUpload和uploadifyClearQueue两个函数，除此之外还有几个函数：
uploadifySettings：可以动态修改上面介绍的那些key值，如下面代码
$('#uploadify').uploadifySettings('folder','JS');
如果上传按钮的事件写成下面这样，文件将会上传到uploadifySettings定义的目录中
<a href="javascript:$('#uploadify').uploadifySettings('folder','JS');
$('#uploadify').uploadifyUpload()">上传</a>
uploadifyCancel：该函数接受一个queueID作为参数，可以取消文件队列中指定queueID的文件。
$('#uploadify').uploadifyCancel(id);
===================================华丽的分割线================================
详解：
Options:
<strong>$('#file_upload').uploadify({
auto:false,
//接受true or false两个值，当为true时选择文件后会自动上传；为false时只会把选择的文件增加进队列但不会上传，这时只能使用upload的方法触发上传。不设置auto时默认为true
buttonClass: "some-class",
//设置上传按钮的class
buttonCursor: 'hand',
//设置鼠标移到按钮上的开状，接受两个值'hand'和'arrow'(手形和箭头)
buttonImage: 'img/browse-btn.png',
//设置图片按钮的路径（当你的按钮是一张图片时）。如果使用默认的样式，你还可以创建一个鼠标悬停状态，但要把两种状态的图片放在一起，并且默认的放上面，悬停状态的放在下面（原文好难表达啊：you can create a hover state for the button by stacking the off state above the hover state in the image）。这只是一个比较便利的选项，最好的方法还是把图片写在CSS里面。
buttonText: '<div>选择文件</div>',
//设置按钮文字。值会被当作html渲染，所以也可以包含html标签
checkExisting: '/uploadify/check-exists.php',
//接受一个文件路径。此文件检查正要上传的文件名是否已经存在目标目录中。存在时返回1，不存在时返回0(应该主要是作为后台的判断吧)，默认为false
debug: false,
//开启或关闭debug模式
fileObjName:'filedata',
//设置在后台脚本使用的文件名。举个例子，在php中，如果这个选项设置为'the_files',你可以使用$_FILES['the_files']存取这个已经上传的文件。
fileSizeLimit:'100MB',
//设置上传文件的容量最大值。这个值可以是一个数字或者字符串。如果是字符串，接受一个单位（B,KB,MB,GB）。如果是数字则默认单位为KB。设置为0时表示不限制
fileTypeExts: '*.*',
//设置允许上传的文件扩展名（也就是文件类型）。但手动键入文件名可以绕过这种级别的安全检查，所以你应该始终在服务端中检查文件类型。输入多个扩展名时用分号隔开('*.jpg;*.png;*.gif')
fileTypeDesc: 'All Files',
//可选文件的描述。这个值出现在文件浏览窗口中的文件类型下拉选项中。（chrome下不支持，会显示为'自定义文件',ie and firefox下可显示描述）
formData: {
timestamp: '<?php echo $timestamp;?>',
token: '<?php echo md5('unique_salt' . $timestamp);?>'
},
//通过get或post上传文件时，此对象提供额外的数据。如果想动态设置这些值，必须在onUploadStartg事件中使用settings的方法设置。在后台脚本中使用 $_GET or $_POST arrays (PHP)存取这些值。看官网参考写法：http://www.uploadify.com/documentation/uploadify/formdata/
height: 30,
//设置按钮的高度(单位px)，默认为30.(不要在值里写上单位，并且要求一个整数，width也一样)
width: 120,
//设置按钮宽度(单位px)，默认120
itemTemplate:false,
//模板对象。给增加到上传队列中的每一项指定特殊的html模板。模板格式请看官网http://www.uploadify.com/documentation/uploadify/itemtemplate/
method:'post',
//提交上传文件的方法，接受post或get两个值，默认为post
multi: false,
//设置是否允许一次选择多个文件，true为允许，false不允许
overrideEvents: [],
//重写事件，接受事件名称的数组作为参数。所设置的事件将可以被用户重写覆盖
preventCaching:true,
//是否缓存swf文件。默认为true，会给swf的url地址设置一个随机数，这样它就不会被缓存。(有些浏览器缓存了swf文件就会触发不了里面的事件--by rainweb)
progressData: 'percentage',
//设置文件上传时显示数据，有‘percentage’ or ‘speed’两个参数(百分比和速度)
queueID: false,
//设置上传队列DOM元素的ID，上传的项目会增加进这个ID的DOM中。设置为false时则会自动生成队列DOM和ID。默认为false
queueSizeLimit: 999,
//设置每一次上传队列中的文件数量。注意并不是限制总的上传文件数量（那是uploadLimit）.如果增加进队列中的文件数量超出这个值，将会触发onSelectError事件。默认值为999
removeCompleted: true,
//是否移除掉队列中已经完成上传的文件。false为不移除
removeTimeout: 3,
//设置上传完成后删除掉文件的延迟时间，默认为3秒。如果removeCompleted为false的话，就没意义了
requeueErrors: false,
//设置上传过程中因为出错导致上传失败的文件是否重新加入队列中上传
successTimeout: 30,
//设置文件上传后等待服务器响应的秒数，超出这个时间，将会被认为上传成功，默认为30秒
swf: 'uploadify.swf',
//swf的相对路径，必写项
uploader: 'uploadify.php'
//服务器端脚本文件路径，必写项
uploadLimit: 999
//上传文件的数量。达到或超出这数量会触发onUploadError方法。默认999
})</strong>
Events:
$('#file_upload').uploadify({
onCancel: function(file){
console.log('The file'+ file.name + 'was cancelled.')
},
//文件被移除出队列时触发,返回file参数
onClearQueue: function(queueItemCount){
console.log(queueItemCount+'file(s) were removed frome the queue')
},
//当调用cancel方法且传入'*'这个参数的时候触发，其实就是移除掉整个队列里的文件时触发，上面有说cancel方法带*时取消整个上传队列
onDestroy: function(){
//调用destroy方法的时候触发
},
onDialogClose: function(queueData){
console.log(queueData.filesSelected+'\n'+queueData.filesQueued+'\r\n'+queueData.filesReplaced+'\r\n'+queueData.filesCancelled+'\r\n'+ queueData.filesErrored)
},
//关闭掉浏览文件对话框时触发。返回queueDate参数，有以下属性：
/*
filesSelected 浏览文件对话框中选取的文件数量
filesQueued 加入上传队列的文件数
filesReplaced 被替换的文件个数
filesCancelled 取消掉即将加入队列中的文件个数
filesErrored 返回错误的文件个数
*/
onDialogOpen:function(){
//打开选择文件对话框时触发
},
onDisable:function(){
//禁用uploadify时触发(通过disable方法)
},
onEnalbe: function(){
//启用uploadify时触发(通过disable方法)
},
onFallback:function(){
//在初始化时检测不到浏览器有兼容性的flash版本时实触发
},
onInit: function(instance){
console.log('The queue ID is'+ instance.settings.queueID)
},
//每次初始化一个队列时触发，返回uploadify对象的实例
onQueueComplete:function(queueData){
console.log(queueData.uploadsSuccessful+'\n'+queueData.uploadsErrored)
},
//队列中的文件都上传完后触发，返回queueDate参数，有以下属性：
/*
uploadsSuccessful 成功上传的文件数量
uploadsErrored 出现错误的文件数量
*/
onSelect: function(file){
console.log(file.name)
},
//选择每个文件增加进队列时触发，返回file参数
onSelectError: function(file,errorCode,errorMsg){
console.log(errorCode)
console.log(this.queueData.errorMsg)
},
//选择文件出错时触发，返回file,erroCode,errorMsg三个参数
/*
errorCode是一个包含了错误码的js对象，用来查看事件中发送的错误码，以确定错误的具体类型，可能会有以下的常量：
QUEUE_LIMIT_EXCEEDED:-100 选择的文件数量超过设定的最大值；
FILE_EXCEEDS_SIZE_LIMIT:-110 文件的大小超出设定
INVALID_FILETYPE:-130 选择的文件类型跟设置的不匹配
errorMsg 完整的错误信息，如果你不重写默认的事件处理器，可以使用‘this.queueData.errorMsg’ 存取完整的错误信息
*/
onSWFReady: function(){
//swf动画加载完后触发，没有参数
},
onUploadComplete: function(file){
//在每一个文件上传成功或失败之后触发，返回上传的文件对象或返回一个错误，如果你想知道上传是否成功，最后使用onUploadSuccess或onUploadError事件
},
onUploadError: function(file,errorCode,erorMsg,errorString){
},
//一个文件完成上传但返回错误时触发，有以下参数
/*
file 完成上传的文件对象
errorCode 返回的错误代码
erorMsg 返回的错误信息
errorString 包含所有错误细节的可读信息
*/
onUploadProgress: function(file,bytesUploaded,bytesTotal,totalBytesUploaded,totalBytesTotal){
$('#pregress').html('总共需要上传'+bytesTotal+'字节，'+'已上传'+totalBytesTotal+'字节')
},
//每更新一个文件上传进度的时候触发,返回以下参数
/*
file 正上传文件对象
bytesUploaded 文件已经上传的字节数
bytesTotal 文件的总字节数
totalBytesUploaded 在当前上传的操作中（所有文件）已上传的总字节数
totalBytesTotal 所有文件的总上传字节数
*/
onUploadStart: function(file){
console.log('start update')
},
//每个文件即将上传前触发
onUploadSuccess: function(file,data,respone){
alert( 'id: ' + file.id
+ ' - 索引: ' + file.index
+ ' - 文件名: ' + file.name
+ ' - 文件大小: ' + file.size
+ ' - 类型: ' + file.type
+ ' - 创建日期: ' + file.creationdate
+ ' - 修改日期: ' + file.modificationdate
+ ' - 文件状态: ' + file.filestatus
+ ' - 服务器端消息: ' + data
+ ' - 是否上传成功: ' + response);
}
//每个文件上传成功后触发
})