自适应备忘录 demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>工作台-备忘录</title>
<link rel="stylesheet" href="../css/weixincrm.min.css">
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript" src="../js/weixincrm.min.js" ></script>
<style type="text/css">
.calendar2 h2{line-height: 0.8rem;height: 0.8rem; text-align: center; color: #25a9e6; font-size: 0.32rem; background-color: #f5f5f5;}
.calendar2 table tbody{width: 100%; position: relative; z-index: 60;}
.calendar2 table{width: 100%;background-color: #fff; border-collapse:collapse; }
.calendar2 table thead{background-color: #c6dde4;}
.calendar2 table thead tr { height: 0.5rem; line-height: 0.5rem; }
.calendar2 table thead tr td{ color: #666; font-size: 0.26rem; text-align: center; font-weight: 500;}
.calendar2 table thead tr td .event-wekday{width: 0.6rem;}
.calendar2 table tbody{padding-top: 0.2rem;}
.calendar2 table tbody tr{height: 0.6rem;line-height: 0.6rem; }
.calendar2 table tbody tr td{color: #333; font-size: 0.26rem; text-align: center; padding-top: 0.2rem;font-weight: 400;}
.calendar2 table tbody tr td .event-day{width: 0.6rem; display: inline-block;border: 2px solid #fff;}
.calendar2 table tbody tr td span.active{ border: 2px solid #3399cc;border-radius: 50%;}
.calendar2 table tbody tr td .current{width: 0.6rem height:0.6rem; border-radius: 50%; background-color: #3399cc; color: #fff;}
.day-event2 {font-size: 0.28rem;color: #333;box-sizing: border-box; margin-left: 0.35rem; margin-right: 0.25rem; border-left: 2px solid #ddd; padding-top: 0.2rem;position: relative;display: none;}
.day-event2 .dost{width: 0.34rem; height: 0.34rem; border: 2px solid #e3e3e3; border-radius: 50%;position: absolute; top: 0.43rem;left: -0.25rem;text-align: center;z-index: 2;}
.day-event2 .dost b{background-color: #ef5e5e; width: 0.29rem; height: 0.29rem; border-radius: 50%; position: absolute;left: 0.028rem;top: 0.025rem;}
.day-event2 div{margin-left: 0.45rem; background-color: #fff; padding-top: 0.15rem; border-radius: 0.05rem; padding-left: 0.2rem; position: relative;}
.day-event2 div p{ line-height: 0.3rem;}
.day-event2 div .arrow-left{border-bottom: 0.3rem solid transparent;border-top: 0.3rem solid transparent;border-right: 0.3rem solid #fff; font-size: 0;line-height: 0; position: absolute;left: -0.25rem;/* top: 0.4rem; */}
.day-event2 .time-text{font-size: 0.22rem; color: #999;padding-top: 0.1rem;padding-bottom: 0.1rem;}
.calendar2 table tbody tr td .current-day{ width: 0.6rem height:0.6rem; border-radius: 50%; background-color: #3399cc; color: #fff;border: 2px solid #3399cc;}
.calendar2 table tbody tr td .event{position: relative;background: #e7e7e7;border: 2px solid #e7e7e7;border-radius: 50%;}
</style>
</head>
<body>
<div id="section_container">
<section id="index-section" class="active">
<header>
<div class="goback2"><h1>客户信息</h1><a href="#" class="backhref"></a></div>
<div class="calendar2 article-top-backhref2">
<h2 class="month">9月2016</h2>
<table>
<thead class="head">
<tr>
<td><span class="event-wekday">周日<span></td>
<td><span class="event-wekday">周日<span></td>
<td><span class="event-wekday">周日<span></td>
<td><span class="event-wekday">周日<span></td>
<td><span class="event-wekday">周日<span></td>
<td><span class="event-wekday">周日<span></td>
<td><span class="event-wekday">周日<span></td>
</tr>
</thead>
<tbody class="event-calendar2">
<tr class="row1">
<td><span class="event-day"></span></td>
<td><span class="event-day"></span></td>
<td><span class="event-day"></span></td>
<td><span class="event-day"></span></td>
<td><span class="event-day active">1</span></td>
<td><span class="event-day">2</span></td>
<td><span class="event-day">3</span></td>
</tr>
<tr class="row2">
<td><span class="event-day">4</span></td>
<td><span class="event-day">5</span></td>
<td><span class="event-day">6</span></td>
<td><span class="event-day">7</span></td>
<td><span class="event-day">8</span></td>
<td><span class="event-day">9</span></td>
<td><span class="event-day">10</span></td>
</tr>
<tr class="row3">
<td><span class="event-day">11</span></td>
<td><span class="event-day">12</span></td>
<td><span class="event-day">13</span></td>
<td><span class="event-day">14</span></td>
<td><span class="event-day">15</span></td>
<td><span class="event-day">16</span></td>
<td><span class="event-day">17</span></td>
</tr>
<tr class="row4">
<td><span class="event-day">18</span></td>
<td><span class="event-day">19</span></td>
<td><span class="event-day current">20</span></td>
<td><span class="event-day">21</span></td>
<td><span class="event-day">22</span></td>
<td><span class="event-day">23</span></td>
<td><span class="event-day">24</span></td>
</tr>
<tr class="row5">
<td><span class="event-day">25</span></td>
<td><span class="event-day">26</span></td>
<td><span class="event-day">27</span></td>
<td><span class="event-day">30</span></td>
<td><span class="event-day"></span></td>
</tr>
</tbody>
</table>
</div>
</header>
<article class="active article-top-0 clearfix">
<div class="scroller scroller-top">
<div class="list">
<!-- <div class="day-event2" date-day="19" date-month="9" date-year="2016" data-number="0" style="display: block;">
<span class="dost"><b></b></span><div><a class="arrow-left"></a><p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam</p>
<p class="time-text">16:52</p>
</div>
</div>
<div class="day-event2" date-day="19" date-month="9" date-year="2016" data-number="0" style="display: block;">
<span class="dost"><b></b></span><div><a class="arrow-left"></a><p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam</p>
<p class="time-text">16:52</p>
</div>
</div> -->
</div>
</div>
</article>
</section>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.scroller').css('top',$('header').height());
})
</script>
<script src="../js/simplecalendar2.js" type="text/javascript"></script>
<!-- <script src="../js/jquery-latest.min.js" type="text/javascript"></script>
<script src="../js/simplecalendar.js" type="text/javascript"></script> -->
</body>
</html>
var calendar = {
init: function(ajax) {
if (ajax) {
// ajax call to print json
//
$.ajax({
type: 'GET',
url: '../data/events.json',
dataType: 'json',
success: function(data){
var events = data.events;
// loop json & append to dom
var myDate = new Date();
var now = myDate.getFullYear() +"/" +(myDate.getMonth()+1)+"/"+myDate.getDate();
for (var i = 0; i < events.length; i++)
{
var time = events[i].year + "/" + events[i].month +"/"+events[i].day;
if(time == now )
{
$('.list').append('<div class="day-event2" style="display:block;" date-day="'+ events[i].day +'" date-month="' + events[i].month +'" date-year="'+ events[i].year +'" data-number="'+ i +'"><span class="dost"><b class="active"></b></span><div><a class="arrow-left"></a><p>'+ events[i].description +'</p><p class="time-text">16:52</p></div></div>');
}
else
{
$('.list').append('<div class="day-event2" date-day="'+ events[i].day +'" date-month="' + events[i].month +'" date-year="'+ events[i].year +'" data-number="'+ i +'"><span class="dost"><b class="active"></b></span><div><a class="arrow-left"></a><p>'+ events[i].description +'</p><p class="time-text">16:52</p></div></div>');
}
}
calendar.startCalendar();
},
error: function(xhr, type){
alert('Ajax error!')
}
})
}
else {
// if not using ajax start calendar
calendar.startCalendar();
}
},
startCalendar: function() {
var mon = '周一';
var tue = '周二';
var wed = '周三';
var thur = '周四';
var fri = '周五';
var sat = '周六';
var sund = '周日';
/**
* Get current date
*/
var d = new Date();
var strDate = yearNumber + "/" + (d.getMonth() + 1) + "/" + d.getDate();
var yearNumber = (new Date).getFullYear();
/**
* Get current month and set as '.current-month' in title
*/
var monthNumber = d.getMonth() + 1;
function GetMonthName(monthNumber) {
var months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
return months[monthNumber - 1];
}
setMonth(monthNumber, mon, tue, wed, thur, fri, sat, sund);
function setMonth(monthNumber, mon, tue, wed, thur, fri, sat, sund) {
$('.month').text(GetMonthName(monthNumber) + ' ' + yearNumber);
$('.month').attr('data-month', monthNumber);
printDateNumber(monthNumber, mon, tue, wed, thur, fri, sat, sund);
}
var oSlide = document.querySelector('.calendar2 table');
// var oList = document.querySelector('.calendar header');
var startPoint = 0;
var startX = 0;
var startY= 0;
var translateX = 0;
var translateY= 0;
oSlide.addEventListener('touchstart',function(e){
startPoint = e.changedTouches[0].pageX;
startY=e.changedTouches[0].pageY;
})
oSlide.addEventListener('touchmove',function(e){
translateX = e.changedTouches[0].pageX - startPoint;
translateY = e.changedTouches[0].pageY - startY;
// translateX = startX + dis;
// translateY=
})
oSlide.addEventListener('touchend',function(e){
if(Math.abs(translateX)> Math.abs(translateY))
{
if(startPoint.toFixed(2)==e.changedTouches[0].pageX.toFixed(2))
{
return false;
}
else
{
if(translateX>0)
{
var monthNumber = $('.month').attr('data-month');
if (monthNumber < 2) {
$('.month').attr('data-month', '13');
var monthNumber = $('.month').attr('data-month');
yearNumber = yearNumber - 1;
setTimeout(setMonth(parseInt(monthNumber) - 1, mon, tue, wed, thur, fri, sat, sund),1000);
} else {
setMonth(parseInt(monthNumber) - 1, mon, tue, wed, thur, fri, sat, sund);
};
var myDate = new Date();
var date=(myDate.getMonth()+1)+"月"+myDate.getFullYear();
var day=myDate.getDate();
var year=myDate.getFullYear();
var month=myDate.getMonth()+1;
$('.day-event2').css('display','none');
if($('.calendar2 .month').text().replace(" ","")==date)
{
$('.day-event2[date-month="' + month + '"][date-year="' + year + '"][date-day="' + day + '"]').css('display','block');
}
// else
// {
// }
}
else if(translateX<0)
{
var monthNumber = $('.month').attr('data-month');
if (monthNumber > 11) {
$('.month').attr('data-month', '0');
var monthNumber = $('.month').attr('data-month');
yearNumber = yearNumber + 1;
setMonth(parseInt(monthNumber) + 1, mon, tue, wed, thur, fri, sat, sund);
} else {
setMonth(parseInt(monthNumber) + 1, mon, tue, wed, thur, fri, sat, sund);
};
var myDate = new Date();
var date=(myDate.getMonth()+1)+"月"+myDate.getFullYear();
var day=myDate.getDate();
var year=myDate.getFullYear();
var month=myDate.getMonth()+1;
$('.day-event2').css('display','none');
if($('.calendar2 .month').text().replace(" ","")==date)
{
$('.day-event2[date-month="' + month + '"][date-year="' + year + '"][date-day="' + day + '"]').css('display','block');
}
}
}
}
else
{
return false;
}
})
function printDateNumber(monthNumber, mon, tue, wed, thur, fri, sat, sund) {
$($('tbody.event-calendar2 tr')).each(function(index) {
$(this).empty();
});
$($('thead.head tr')).each(function(index) {
$(this).empty();
});
function getDaysInMonth(month, year) {
// Since no month has fewer than 28 days
var date = new Date(year, month, 1);
var days = [];
while (date.getMonth() === month) {
days.push(new Date(date));
date.setDate(date.getDate() + 1);
}
return days;
}
i = 0;
setDaysInOrder(mon, tue, wed, thur, fri, sat, sund);
function setDaysInOrder(mon, tue, wed, thur, fri, sat, sund) {
var monthDay = getDaysInMonth(monthNumber - 1, yearNumber)[0].toString().substring(0, 3);
if (monthDay === 'Mon') {
$('thead.head tr').append('<td><span class="event-wekday">' + mon + '</span></td><td><span class="event-wekday">' + tue + '</span></td><td><span class="event-wekday">' + wed + '</span></td><td><span class="event-wekday">' + thur + '</span></td><td><span class="event-wekday">' + fri + '</span></td><td><span class="event-wekday">' + sat + '</span></td><td><span class="event-wekday">' + sund + '</span></td>');
} else if (monthDay === 'Tue') {
$('thead.head tr').append('<td><span class="event-wekday">' + tue + '</span></td><td><span class="event-wekday">' + wed + '</span></td><td><span class="event-wekday">' + thur + '</span></td><td><span class="event-wekday">' + fri + '</span></td><td><span class="event-wekday">' + sat + '</span></td><td><span class="event-wekday">' + sund + '</span></td><td><span class="event-wekday">' + mon + '</span></td>');
} else if (monthDay === 'Wed') {
$('thead.head tr').append('<td><span class="event-wekday">' + wed + '</span></td><td><span class="event-wekday">' + thur + '</span></td><td><span class="event-wekday">' + fri + '</span></td><td><span class="event-wekday">' + sat + '</span></td><td><span class="event-wekday">' + sund + '</span></td><td><span class="event-wekday">' + mon + '</span></td><td><span class="event-wekday">' + tue + '</span></td>');
} else if (monthDay === 'Thu') {
$('thead.head tr').append('<td><span class="event-wekday">' + thur + '</span></td><td><span class="event-wekday">' + fri + '</span></td><td><span class="event-wekday">' + sat + '</span></td><td><span class="event-wekday">' + sund + '</span></td><td><span class="event-wekday">' + mon + '</span></td><td><span class="event-wekday">' + tue + '</span></td><td><span class="event-wekday">' + wed + '</span></td>');
} else if (monthDay === 'Fri') {
$('thead.head tr').append('<td><span class="event-wekday">' + fri + '</span></td><td><span class="event-wekday">' + sat + '</span></td><td><span class="event-wekday">' + sund + '</span></td><td><span class="event-wekday">' + mon + '</span></td><td><span class="event-wekday">' + tue + '</span></td><td><span class="event-wekday">' + wed + '</span></td><td><span class="event-wekday">' + thur + '</span></td>');
} else if (monthDay === 'Sat') {
$('thead.head tr').append('<td><span class="event-wekday">' + sat + '</span></td><td><span class="event-wekday">' + sund + '</span></td><td><span class="event-wekday">' + mon + '</span></td><td><span class="event-wekday">' + tue + '</span></td><td><span class="event-wekday">' + wed + '</span></td><td><span class="event-wekday">' + thur + '</span></td><td><span class="event-wekday">' + fri + '</span></td>');
} else if (monthDay === 'Sun') {
$('thead.head tr').append('<td><span class="event-wekday">' + sund + '</span></td><td><span class="event-wekday">' + mon + '</span></td><td><span class="event-wekday">' + tue + '</span></td><td><span class="event-wekday">' + wed + '</span></td><td><span class="event-wekday">' + thur + '</span></td><td><span class="event-wekday">' + fri + '</span></td><td><span class="event-wekday">' + sat + '</span></td>');
}
};
$(getDaysInMonth(monthNumber - 1, yearNumber)).each(function(index) {
var index = index + 1;
if (index < 8) {
$('tbody.event-calendar2 tr.row1').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '"><span class="event-day">' + index + '</span></td>');
} else if (index < 15) {
$('tbody.event-calendar2 tr.row2').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '"><span class="event-day">' + index + '</span></td>');
} else if (index < 22) {
$('tbody.event-calendar2 tr.row3').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '"><span class="event-day">' + index + '</span></td>');
} else if (index < 29) {
$('tbody.event-calendar2 tr.row4').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '"><span class="event-day">' + index + '</span></td>');
} else if (index < 32) {
$('tbody.event-calendar2 tr.row5').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '"><span class="event-day">' + index + '</span></td>');
}
i++;
});
var date = new Date();
var month = date.getMonth() + 1;
var thisyear = new Date().getFullYear();
setCurrentDay(month, thisyear);
setEvent();
displayEvent();
}
/**
* Get current day and set as '.current-day'
*/
function setCurrentDay(month, year) {
var viewMonth = $('.month').attr('data-month');
var eventYear = $('.event-days').attr('date-year');
if (parseInt(year) === yearNumber) {
if (parseInt(month) === parseInt(viewMonth)) {
$('tbody.event-calendar2 td[date-day="' + d.getDate() + '"] span').addClass('current-day');
}
}
};
/*$('tbody td span').on('click', function(e) {
alert('11');
if ($(this).hasClass('event')) {
$('tbody.event-calendar2 td span').removeClass('active');
$(this).addClass('active');
} else {
$('tbody.event-calendar2 td span').removeClass('active');
$(this).addClass('active');
// debugger;
// $('.event-calendar tr td[class="active"]').text();获取日
// $('.month').text();获取年月
};
});
*/
/**
* Add '.event' class to all days that has an event
*/
function setEvent() {
$('.day-event2').each(function(i) {
var eventMonth = $(this).attr('date-month');
var eventDay = $(this).attr('date-day');
var eventYear = $(this).attr('date-year');
var eventClass = $(this).attr('event-class');
if (eventClass === undefined) eventClass = 'event';
else eventClass = 'event ' + eventClass;
var date = new Date();
var month = date.getMonth() + 1;
var day=date.getDate();
if (parseInt(eventYear) === yearNumber) {
if(eventMonth==month&& eventDay==day)
{
$('tbody.event-calendar2 tr td[date-month="' + eventMonth + '"][date-day="' + eventDay + '"] span').addClass();
}
else
{
$('tbody.event-calendar2 tr td[date-month="' + eventMonth + '"][date-day="' + eventDay + '"] span').addClass(eventClass);
}
}
});
};
/**
* Get current day on click in calendar
* and find day-event to display
*/
function displayEvent() {
$('tbody.event-calendar2 td span').on('click', function(e) {
$('.day-event2').css('display','none');
var monthEvent = $(this).parent().attr('date-month');;
var dayEvent = $(this).text();
var yearEvent = $(this).parent().attr('date-year');
$('.day-event2[date-month="' + monthEvent + '"][date-year="' + yearEvent + '"][date-day="' + dayEvent + '"]').css('display','block');
$('tbody.event-calendar2 td span').removeClass('active');
$(this).addClass('active');
});
};
}
}
$(document).ready(function() {
calendar.init('ajax');
});
自适应备忘录 demo的更多相关文章
- 前端切图:手机端自适应布局demo
手机端自适应布局demo原型如下: 图片发自简书App 要求如下:适应各种机型源码如下: <!DOCTYPE html > <html> <head> <me ...
- 手机端自适应布局demo
原型如下: 要求如下:适应各种机型 源码如下: <!DOCTYPE html > <html> <head> <meta http-e ...
- textarea如何实现高度自适应？
今天需要些一个回复评论的页面,设计师给的初始界面就是一个只有一行的框.然后当时就想这个交互该怎么实现比较好,然后想起了新浪微博的做法:点击评论,默认显示一行,当输入的文字超过一行或者输入Enter时, ...
- textarea文本域轻松实现高度自适应
转载:http://www.xuanfengge.com/textarea-on-how-to-achieve-a-high-degree-of-adaptive.html 今天需要些一个回复评论的页 ...
- display:table-cell的应用
一.display:table-cell属性简述 display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6 ...
- 几种display:table-cell的应用
一.display:table-cell属性简述 display:table- cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以及其他现代浏览器都是支持此属性的,但是IE ...
- 也来谈谈wap端瀑布流布局
Definition 瀑布流布局,在视觉上表现为参差不齐的多栏布局,随着页面滚动条向下滚动,新数据不断被加载进来. 瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内 ...
- absolut绝对定位的非绝对定位用法
一.absolute绝对定位的流行用法 一般而言,我们会用absolute绝对定位做什么呢?就是绝对定位,顾名思意,定死在某个位置上.例如,lightbox效果就是使用的绝对定位,例如新浪微博的弹出提 ...
- 【分享】纯jQuery实现星巴克官网导航栏效果
前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...
随机推荐
- MySQL_02之增删改查、PHP数据库操作
1.数据操作: ①插入记录: 插入单条记录:INSERT tbl_name(字段名称,--) VALUES(字段值,--); 插入多条记录:INSERT tbl_name(字段名称,--) VAL ...
- Leetcode-190 Reverse Bits
#190. Reverse Bits Reverse bits of a given 32 bits unsigned integer. For example, given input 432615 ...
- [转]关于typedef的用法总结
不管实在C还是C++代码中,typedef这个词都不少见,当然出现频率较高的还是在C代码中.typedef与#define有些相似,但更多的是不同,特别是在一些复杂的用法上,就完全不同了,看了网上一些 ...
- LINQ系列：Linq to Object生成操作符
生成操作符从现有序列值中创建新的序列. 1. Empty Empty操作符返回一个指定类型的空集. 1>. 原型定义 public static IEnumerable<TResult& ...
- jQuery-easyui实现关闭全部tabs
有时候当我们打开很多tabs选项卡时,要关闭它只能一个一个的进行关闭,显然太麻烦,这时可以在选项卡的最右边添加一个按钮 实现关闭全部. function openTab(text, url, icon ...
- MVC5 网站开发实践 2、后台管理
目录 MVC5 网站开发实践 概述 MVC5 网站开发实践 1.建立项目 从这一部分开始做后台管理,首先是基本框架的 一.Data项目 1.项目添加EntityFramework引用 在Data项 ...
- 【原创】开源Math.NET基础数学类库使用(11)C#计算相关系数
本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新 开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...
- android5.0联系人 sort_key改成phonebook_label
项目中用到了联系人根据字母排序,在android4.0手机上是可以的,但是在android4.4以上的手机排序是乱的,一般字母排序都是根据sort_key这个拼音进行排序,而android5.0这个字 ...
- MySQL学习笔记十五：优化(2)
一.数据库性能评测关键指标 1.IOPS:每秒处理的IO请求次数,这跟磁盘硬件相关,DBA不能左右,但推荐使用SSD. 2.QPS:每秒查询次数,可以使用show status或mysqladmin ...
- 再看ftp上传文件
前言 去年在项目中用到ftp上传文件,用FtpWebRequest和FtpWebResponse封装一个帮助类,这个在网上能找到很多,前台使用Uploadify控件,然后在服务器上搭建Ftp服务器,在 ...