zoukankan      html  css  js  c++  java
  • uploadify,实际开发案例【选择完文件点击上传才上传】

    <script type="text/javascript">
        var $upfile_name="【<? echo $_username;?>"+Math.floor(Math.random()*9999999)+Math.floor(Math.random()*99999999)+'】-';  //设置随机文件前缀。
        $k(function() 
        { 
            $k("#uploadify").uploadify({ 
            'uploader': '../file/uploads/uploads.swf', 
            'cancelImg': '../file/uploads/cancel.png', 
            'folder': '../file/uploads/UploadFile', 
            'queueID': 'fileQueue', 
            'buttonImg':'../file/uploads/images/upload.jpg', 
            'width':'95',
            'height':'24',
            'auto': false, //非自动上传模式。
            'fileDesc':'请选择doc,rar,pdf,rar,txt文件!',
            'fileExt':'*.doc;*.pdf;*.rar;*.txt',
            'sizeLimit':'10240000000000000',
            'script': '../file/uploads/uploadify.php',
            'fileDataName':'Filelist',
            //'checkScript': '../file/uploads/check.php', 
            'onInit':function()//脚本加载时触发。
            {
                $k("#shangchuan").attr("disabled",true);
                $k("#unshangchuan").attr("disabled",true);
            },    
            'onSelect': function(e, queueId, fileObj)
            {
                $k("#uploadify").uploadifySettings('scriptData',{'name':$upfile_name}); //不重复文件名的关键,在上传时给文件加上自定义的随机前缀。
                //var $value_zh=$k("#some").val();
                //$k("#Success").val("");
                //$k("#some").attr("value",$upfile_name+fileObj.name+"|"+$value_zh);
                $k("#shangchuan").attr("disabled",false).attr("enabled",true);
                $k("#unshangchuan").attr("disabled",false).attr("enabled",true);
            },
            'onCancel': function(e, queueId, fileObj)    //点击上传文件后面的删除图片时触发
            {
                var $value_zh=$k("#some").val();
                $value_zh=$value_zh.replace($upfile_name+fileObj.name+"|","");
                //alert(fileObj.name);
                //alert(value_zh);
                $k("#some").val($value_zh);
                if($k(".uploadifyQueueItem").length==1) 
                {
                    $k("#shangchuan").attr("disabled",true).attr("enabled",false);
                    $k("#unshangchuan").attr("disabled",true).attr("enabled",false);
                }
            },
            'onComplete':function (event, queueID, fileObj, response, data)    //上传一次
            {
                //var $content_fz=$k("<li id='file_list' style='height:30px;'>文件名:<input name='Success[]' type='text' id='Success' value='"+fileObj.name+"上传成功' size='20' readonly='true'/>&nbsp;&nbsp;&nbsp;文件简介:<input name='Introduction' type='text' id='Introduction' size='20'/>&nbsp;&nbsp;&nbsp;<a id='del'>[删除]</a></li>");
                var $value_zh=$k("#some").val();
                $k("#some").attr("value",$upfile_name+fileObj.name+"|"+$value_zh);
                var $content_fz=$k("<li id='file_list' style='height:30px;'>文件名:<input name='Success[]' type='text' id='Success' value='"+fileObj.name+"' size='20' readonly='true'/>&nbsp;<a id='del'>[删除]</a></li>");
                $k("#file_content").append($content_fz);
                
                //$k("#Success").val("").val(""+fileObj.name+"上传成功");
            },
            'onError':function(event, queueID, fileObj)    //错误提示
            {
                $k("#Success").val("").val(""+fileObj.name+"上传失败");
            }, 
            'onAllComplete':function(event)    //全部上传完成
            {
                //$k("#Success").hide();
                //$k("#some").val("");
                //$k("#Success").val("");
                $k("#shangchuan").attr("disabled",true).attr("enabled",false);
                $k("#unshangchuan").attr("disabled",true).attr("enabled",false);
                
                $k("a").click(function(){
                    $k(this).parent("li:eq(0)").remove();
                    var $file_name_1=$k(this).parent("li").children("input").val();
                    var $file_name_2=$k("#some").val();
                    $file_name_2=$file_name_2.replace($upfile_name+$file_name_1+"|","")
                    $k("#some").val($file_name_2);
                })
            },
            'multi': true 
            });
            
            $k("#shangchuan").click(function(){     //上传按钮
                $k('#uploadify').uploadifyUpload();
                $k("#shangchuan").attr("disabled",true).attr("enabled",false);
                $k("#unshangchuan").attr("disabled",true).attr("enabled",false);
            })
            
            $k("#unshangchuan").click(function(){    //取消全部按钮
                $k('#uploadify').uploadifyClearQueue();
                $k("#shangchuan").attr("disabled",true).attr("enabled",false);
                $k("#unshangchuan").attr("disabled",true).attr("enabled",false);
            })
        }); 
    </script>

    html代码:

    <tr>
      <td class="tl"><span class="f_red">*</span> 附件</td>
      <td class="tr">
    <div id="fileQueue"></div>
    <input type="file" name="uploadify" id="uploadify" /><br/><br/>
    选择的上传文件:<input name="some" type="text" id="some" size="60" readonly="true"/>
    <br/><br/>
    <ul id="file_content"></ul>
    <p>
    <input type="button" name="Submit" value="上 传" id="shangchuan"/>&nbsp;&nbsp;&nbsp;<input type="button" name="Submit2" value="取消上传" id="unshangchuan"/></td>
    </tr>

    php代码:

    $_POST['name']; //接的是下面蓝色字,下面蓝色字就是变量名,这里name可以任意修改,修改成什么我们到时候接什么就OK;下面的$upfile_name是对应的值。
    接值:$k("#uploadify").uploadifySettings('scriptData',{'name':$upfile_name});

    整个效果图如下:

  • 相关阅读:
    [转]data类型的Url格式:把小数据直接嵌入到Url中
    SQL 找出某列最小的行记录.
    用 Dos 像数据库一样拎出所有文件.
    Js 正则表达式 RegExp .
    KMP算法C语言实现。弄了好久才搞好。。。
    python如何保证输入键入数字
    数据库关系图:“此数据库没有有效所有者,因此无法安装数据库关系图支持对象&quot;的解决方法
    建立sql数组的一个函数
    实用的240多个jQuery插件
    begin tran,commit tran和rollback tran的用法
  • 原文地址:https://www.cnblogs.com/zhujiabin/p/4977534.html
Copyright © 2011-2022 走看看