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

    });

});

最后效果如下：

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

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