第二篇——控件
这一篇将会使用Jquery替代HTML5的上传控件,并增加文件信息展示和上传进度条。
首先我们需要下载JqueryUploadify这一个控件包(注2提供下载链接地址),里面包含以下几个引用:
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/js/jquery.uploadify.v2.1.0.js" type="text/javascript"></script>
<script src="/js/jquery.uploadify.v2.1.0.min.js" type="text/javascript"></script>
<script src="/js/swfobject.js" type="text/javascript"></script>
<link href="/css/uploadify.css" rel="stylesheet" type="text/css" />
- 1
- 2
- 3
- 4
- 5
在前台页面中写入form表单和相应的按钮
<form id="form1" runat="server">
<div id="fileQueue">
</div>
<div>
<p>
<input type="file" name="uploadify" id="uploadify"/>
<input id="Button1" type="button" value="上传" onclick="javascript: $('#uploadify').uploadifyUpload()" />
<input id="Button2" type="button" value="取消" onclick="javascript: $('#uploadify').uploadifyClearQueue()" />
</p>
</div>
</form>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
然后写一下uploadify的JS:
<script type="text/javascript">
$(document).ready(function () {
$("#uploadify").uploadify({
'uploader': 'image/uploadify.swf', //uploadify.swf文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框
'script': 'Handler1.ashx',// script : 后台处理程序的相对路径
'cancelImg': 'image/cancel.png',
'buttenText': '请选择文件',//浏览按钮的文本,默认值:BROWSE。
'sizeLimit':999999999,//文件大小显示
'floder': 'Uploader',//上传文件存放的目录
'queueID': 'fileQueue',//文件队列的ID,该ID与存放文件队列的div的ID一致
'queueSizeLimit': 120,//上传文件个数限制
'progressData': 'speed',//上传速度显示
'auto': false,//是否自动上传
'multi': true,//是否多文件上传
//'onSelect': function (e, queueId, fileObj) {
// alert("唯一标识:" + queueId + "\r\n" +
// "文件名:" + fileObj.name + "\r\n" +
// "文件大小:" + fileObj.size + "\r\n" +
// "创建时间:" + fileObj.creationDate + "\r\n" +
// "最后修改时间:" + fileObj.modificationDate + "\r\n" +
// "文件类型:" + fileObj.type);
// },
'onQueueComplete': function (queueData) {
alert("文件上传成功!");
return;
}
});
});
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
最后后台程序和我们第一篇使用的后台处理是同一程序,下面是图片展示区:
如果报错或者超出文件上传限制将会用下面的方式提示用户
CSS样式区:
<style>
#drop_zone {
border: 2px dashed #BBB;
padding: 25px 5px;
text-align: center;
font-size: 20pt;
color: #BBB;
border-radius: 5px;
}
#drop_zone.hovering {
-webkit-box-shadow: inset 0px 0px 50px #BBB;
-moz-box-shadow: inset 0px 0px 50px #BBB;
-o-box-shadow: inset 0px 0px 50px #BBB;
box-shadow: inset 0px 0px 50px #BBB;
}
.example {
margin: 40px 25px;
padding: 10px;
border: 1px solid #BBB;
}
#description:first-line {
margin-left: 42px;
}
#output_area {
text-align: left;
}
#output_area li {
margin: 10px 0;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
注1:运用dataTransfer对象,不仅仅能传输数据,还能通过dataTransfer对象确定被拖拽的元素以及作为放置目标的元素能够接收什么操作。
其中,通过dropEffect属性可以知道被拖动的元素能够执行哪种行为。这个属性的四个值如下:
none:不能把拖动的元素放在这里。这是除了文本框之外所有元素默认的值。
move:把拖动的元素移动到放置目标。
copy:把拖动的元素复制到放置目标。
link:放置目标会打开拖动的元素(但拖动的元素必须是个链接,有URL地址)。
把元素拖动到放置目标上的时候,以上每一个值都会导致光标显示为不同的符号。
注2:http://www.uploadify.com/documentation/ 官方控件包下载地址