脚本语言 订阅所有【脚本语言】的日志

同一页面多个Uploadify实例+表单提交示例

编辑:dnawo 日期:2013-09-25

字体大小: 小 中 大
复制内容到剪贴板程序代码 程序代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>同一页面多个Uploadify实例+表单提交示例 - MZWU.COM</title>
    <link type="text/css" rel="stylesheet" href="/Scripts/uploadify/uploadify.css" />
    <script type="text/javascript" src="/Scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/Scripts/uploadify/jquery.uploadify.min.js"></script>
</head>
<body>
    <input type="file" id="file1" />
    <input type="file" id="file2" />
    <input type="button" id="btnUpload" value="Upload" />

    <script type="text/javascript">
        $(document).ready(function () {
            //1.要上传的文件数
            var uploadfiles = 0;
            //2.提交表单相关方法
            var submit = function () {
                if (uploadfiles == 0) {
                    /*
                    *   提交表单
                    */
                    alert("表单提交成功！");
                }
            };
            $("#btnUpload").click(function () {
                //uploadfiles = $("#file1-queue > div").length + $("#file2-queue > div").length;
                uploadfiles = window["uploadify_file1"].queueData.queueLength + window["uploadify_file2"].queueData.queueLength;
                if (uploadfiles > 0) {
                    $("#file1").uploadify("upload", "*");
                    $("#file2").uploadify("upload", "*");
                }
                else {
                    submit();
                }
            });
            //3.Uploadify配置
            var settings = {
                swf: "/Scripts/uploadify/uploadify.swf",
                uploader: "/Upload.ashx",
                auto: false,
                onUploadSuccess: function () {
                    uploadfiles--;
                    submit();
                }
            };
            $("#file1").uploadify(settings);
            $("#file2").uploadify(settings);
        });
    </script>
</body>
</html>


上一篇: jQuery文件上传插件Uploadify使用示例
下一篇: Uploadify3.2.1总会发起一次页面请求bug解决方法
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 0 | 引用: 0 | 查看次数: 10180
发表评论
请登录后再发表评论！