uploadify多文件上传

最新推荐文章于 2018-05-04 16:21:06 发布

菜鸟10086枚

最新推荐文章于 2018-05-04 16:21:06 发布

阅读量195

点赞数

文章标签： uploadify 多文件上传

本文链接：https://blog.csdn.net/qq_35650042/article/details/71480023

版权

项目中需要多个图片上传，于是就上网找了一个上传插件uploadify。这个插件好像是不兼容火狐浏览器，因为是做的后台功能就无所谓了，让后台管理员用360浏览器就行。下面说一下用法：

<!-- 引入文件 -->
<link rel="stylesheet" type="text/css" href="plugins/uploadify/uploadify.css"> 
<script type="text/javascript" src="plugins/uploadify/jquery.uploadify.min.js"></script>
<body>
    <div>
        <!-- 设置需要渲染的区域 -->
        <input type="file" name="file" id="file"/>
        <a class="btn btn-mini btn-primary" href="javascript:$('#file').uploadify('upload','*')">开始上传</a>
        <a class="btn btn-mini btn-primary" href="javascript:$('#file').uploadify('cancel')">删除图片</a>
    </div>
    <script type="text/javascript">
                /*进行渲染*/
         $(function() {
            $('#file').uploadify({
                'swf'           :    "plugins/uploadify/uploadify.swf",  
                'uploader'      :   "<%=basePath%>/syscrop/upload.do",
                'mehtod'        :    "post",
                'fileObjName'    :    'file',
                'cancelImg'     :   "plugins/uploadify/uploadify-cancel.png",  
                'debug'         :   false, 
                'formData'        :    {"disid":disid},
                'buttonText'    :   '选择照片',
                'auto'          :     false,
                'buttonClass'   :  'upload_button',  
                'fileTypeDesc'  :   '图片文件',  
                'fileTypeExts'  :   '*.gif;*.jpg;*.png;*.bmp',  
                'multi'             :   true,  
                  
                'onUploadComplete': function(file){  
                      
                },  
                  
                /** 
                 * 上传成功后触发事件 
                 */  
                 'onUploadSuccess' : function(file, data, response) {
                     $("#file").uploadify("settings","formData",{"disid":data});
                     disid = $("#disid").val();
                     if(null==disid || ""==disid){
                         $("#disid").val(data);
                     }
                },  
            });  
        });
</script>

运行后的结果：