JQuery 上传文件插件 Uploadify1

基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件.

    <link href="~/Content/themes/uploadify.css" type="text/css" rel="stylesheet" />
<script src="~/Scripts/jquery.uploadify.min.js" type="text/javascript"></script>

首先添加引用文件uploadify.js 和 uploadify.css

创建一个file input, 基于这个file 初始化uploadify

<input type="file" id="uploadify" name="uploadify" />
$(this).ready(function () {
$('#uploadify').uploadify({
'swf': '/Uploadify/uploadify.swf',
'uploader': '/Home/Upload',
'buttonText': 'Browser',
'fileDataName': 'file',
'fileTypeDesc': 'File',
'fileTypeExts': '*.jpg; *.jpeg; *.tiff; *.gif; *.bmp; *.png; *.pdf; *.doc; *.docx; *.docm; *.xls; *.xlsx; *.xlsm; *.ppt; *.pptx; *.txt',
'cancelImg': '/Uploadify/uploadify-cancel.png',
//'folder': 'UploadFile'
// Your options here }); });

最后效果如下:

JQuery 上传文件插件 Uploadify1

查看生成的html发现file input变成一个DIV。

JQuery 上传文件插件 Uploadify1

基本原理是改变你创建的file input生成一个DOM结构,创建一个DIV按钮,按钮样式修改在uploadify.css文件中的.uploadify-button,将swf文件定位在按钮上面,这样当你点击按钮时实际上点击的是swf。

上一篇:线段树详解 (原理,实现与应用)(转载自:http://blog.csdn.net/zearot/article/details/48299459)


下一篇:【深入理解Java虚拟机】第三章 垃圾收集器与内存分配策略(四)