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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。