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'/> 文件简介:<input name='Introduction' type='text' id='Introduction' size='20'/> <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'/> <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"/> <input type="button" name="Submit2" value="取消上传" id="unshangchuan"/></td> </tr>
php代码:
$_POST['name']; //接的是下面蓝色字,下面蓝色字就是变量名,这里name可以任意修改,修改成什么我们到时候接什么就OK;下面的$upfile_name是对应的值。
接值:$k("#uploadify").uploadifySettings('scriptData',{'name':$upfile_name});
整个效果图如下: