zoukankan      html  css  js  c++  java
  • jquery上传插件(uploadify)的使用

    已经很久没写博客了。今天乘着有时间,写一下,回味一下!不废话了。let's go

    作为jquery的粉丝,jquery提供的插件很多,今天就介绍一个。

    新建web项目:UpdisFile

    添加UploadFile文件夹,然后再UploadFile文件夹下面添加子文件夹Upload,作为上传的文件夹使用

    添加完后就可以导入需要的jquery上传插件

    在default页面中加入所需要的脚本,这里需要引入的脚本和样式文件要仔细点

    这个就是需要引入的脚本,请大家引入的时候仔细点啊。

    下面的工作就是编写jquery的加载脚本了

     <script type="text/javascript">
    
        $(document).ready(function () {
    
            $("#uploadify").uploadify({
                'uploader': 'UploadImg/uploadify.swf',// uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框,默认值:uploadify.swf
                'script': 'UploadImg/ajax/UploadHandler.ashx',//处理上传的一般处理程序
                'cancelImg': 'UploadImg/cancel.png',//取消的图片文件夹位置
                'folder': "UploadFile/Upload/",//上传文件夹位置
                'queueID': 'fileQueue',// 文件队列的ID,该ID与存放文件队列的div的ID一致
                'fileExt': '*.jpg;*.gif;*.png',//设置可选择文件的类型
                'fileDesc': 'Image Files (.JPG, .GIF, .PNG)',//允许上传文件的类型
                'buttonText': 'Choose',//选择文件按钮的值,这个可以自定义
                'auto': false,//设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传
                'multi': true//设置可上传多个文件,false为单一上传
            });
        });
        </script>

    这些我都加了注释,在API中也是这么描述的。

    下面是HTML代码

    <div style="800px; height:auto;margin:0px auto;"> 
            <div>
                <h3>
                    上传图片</h3>
            </div>
            <div id="fileQueue" >
            </div>
            <div>
                <input type="file" name="uploadify" id="uploadify" />
                <input style="vertical-align: top; height: 30px; background: #535353; color: White;
                    font-weight: bold; font-size: 13px; cursor: pointer;" type="button" name="uploadify"
                    onclick="javascript:$('#uploadify').uploadifyUpload()" value="上传" />
                <input style="vertical-align: top; height: 30px; background: #535353; color: White;
                    font-weight: bold; font-size: 13px; cursor: pointer;" type="button" name="uploadify"
                    onclick="javascript:$('#uploadify').uploadifyClearQueue()" value="取消上传" />
            </div>
        </div>

    到此就是这么多了。现在就可以运行了。 

    因为本人测试了很多个浏览器。发现谷歌对于上传选择文件的类型是不支持的。所以我感觉有的纳闷,不知道各位大侠们有没有遇到这个问题,如果有其留下言啊。

    这是谷歌浏览器的选择文件,就是这里有点纳闷

    火狐是正常的,其他的浏览器都是可以的

    http://download.csdn.net/detail/mryanghenglian/4657375