uploadify多文件上传插件

时间 2019-11-16 标签 uploadify 多文件上传插件

这个插件是兼容IE8及以上版本的，实现了基本功能，底部有下载链接javascript

代码以下：css

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>uploadify多文件上传插件使用</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
    <link rel="stylesheet" type="text/css" href="js/uploadfiy/uploadify.css"/>
    <style type="text/css">
        #fileQueue {
            background_color: #FFF;
            border_radius: 3px;
            /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); */
            border:1px solid #95B8E7;
            /* box-shadow: 0 1px 3px rgba(135, 175, 255, 1); */
            height: 220px;
            margin-bottom: 10px;
            overflow: auto;
            /* padding: 5px 10px; */
            width: 395px;
        }
    </style>
    <!--这个js是通过修改的，能够兼容IE8及以上的版本-->
    <script type="text/javascript" src="js/uploadfiy/jquery.uploadify.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {
            initFile();
        });

        function initFile() {

            $("#uploadify").uploadify({
                'uploader': 'FileUpLoadServlet',//后台处理的页面
                'swf' : './js/uploadfiy/uploadify.swf',
                'script' : '',
                'width':80,
                'height':23,
                'folder' : '../upload',
                'buttonText' : '选择文件',
                'fileExt' : '*.*', //容许上传的文件格式
                'queueID' : 'fileQueue',
                'auto' : false, //须要手动的提交申请
                'simUploadLimit':3, //同时运行上传的进程数
                'queueSizeLimit':10,//
                'multi' : true
                //'scriptData':{'dept':'dept1','group':'group1'},  //这个参数必需要设置成method为get，
                //'method':'get'                           //后台用request.getParameter('name')获取名字的值
            });
        }

        //用户取消函数
        function funCancel(event, ID, fileObj, data) {
            alert('您取消了' + fileObj.name + '操做', 'info');
            return;
        }

        //图片上传发生的事件
        function funComplete(event, ID, fileObj, response, data) {
            //$("#pic").html('<img id="pic" runat="server" src=../upload/' + response + '.jpg style="width:300;height:200px;"/>');
            if (response == 0) {
                jBox.tip('图片' + fileObj.name + '操做失败', 'info');
                return;
            }
            $("#pic").attr("src", "../upload/" + response).height(200).width(300);
            jBox.tip('图片' + fileObj.name + '操做成功', 'info');
            return;
        }

        //上传发生错误时。
        function funError(event, ID, fileObj, errorObj) {
            jBox.tip(errorObj.info);
            return;
        }
    </script>
</head>

<body style="background-color:white;">
    <div id="maindiv" style="margin:0 auto;width:100%; text-align:center;border:1px solid #95b8e7; background-color:#F3F3F3;">
        <div id="filecollection" style=" width:420px;margin:0 auto;text-align:left; margin-top:30px;margin-bottom:50px;">
            <input type="file" name="uploadify" id="uploadify" />
            <div id="fileQueue"></div>
            <p style="font-size:12px;">
                <a href="javascript:$('#uploadify').uploadify('upload','*')">上传</a>| <a
                    href="javascript:$('#uploadify').uploadify('cancel','*')">取消上传</a>
            </p>
        </div>
    </div>
</body>
</html>

代码下载链接：http://download.csdn.net/detail/zhzhjieke/8411193