【jQuery】uploadify,實際開發案例【選擇完文件點擊上傳才上傳】


----------------------------------------------------------------------------------
js部分:
----------------------------------------------------------------------------------
<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});

----------------------------------------------------------------------------------
整個效果圖如下:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM