【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'/> 文件简介:<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});
----------------------------------------------------------------------------------
整个效果图如下:
【jQuery】uploadify,实际开发案例【选择完文件点击上传才上传】的更多相关文章
- uploadify,实际开发案例【选择完文件点击上传才上传】
<script type="text/javascript"> )+Math.floor(Math.random()*)+']-'; //设置随机文件前缀. $k(fu ...
- MVC 4 结合jquery.uploadify 上传实例
前言:由于今天公司源代码服务瘫痪,没法编写代码,利用这个有限的时间,做了一个小小的 基于MVC的图片上传demo,貌似近些年来MVC十分火爆,相关的demo也数不胜数,小弟就在这里打着MVC的旗子,狐 ...
- jquery.uploadify文件上传组件
1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...
- jquery.uploadify上传文件配置详解(asp.net mvc)
页面源码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之五 模块(菜单)管理源码分享
http://www.cnblogs.com/huyong/p/3454012.html 使用Jquery+EasyUI 进行框架项目开发案例讲解之五 模块(菜单)管理源码分享 在上四篇文章 ...
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之三 角色管理源码分享 在上两篇文章 <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> ...
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之二 用户管理源码分享 在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享>我们分享 ...
- 【推荐】使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之一 员工管理源码分享 在开始讲解之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery的U ...
- 使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享
使用Jquery+EasyUI 进行框架项目开发案例解说之中的一个 员工管理源代码分享 在開始解说之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery ...
随机推荐
- node npm 总结
是nodejs的软件包管理器,用于node插件管理 npm install <name> [-g] [--save -dev] name:安装模块的名称 -g:全局安装 --save:将保 ...
- 【旧文章搬运】Windows句柄表分配算法分析(实验部分)
原文发表于百度空间,2009-03-31========================================================================== 理论结合实 ...
- JDK7中匿名内部类中使用局部变量要加final,JDK8中不需要,但jdk会默认加上final
今天看书的时候看到了局部内部类,书上说局部内部类可以访问局部变量,但是必须是final的.因为局部变量在方法调用之后就消失了,使用final声明的话该局部变量会存入堆中,和内部类有一样的声明周期.但是 ...
- View Controller Programming Guide for iOS---(六)---Responding to Display-Related Notifications
Responding to Display-Related Notifications 响应跟显示相关的通知 When the visibility of a view controller’s vi ...
- 土法搞docker系列之自制docker的graph driver vdisk
写在最前 偶然整理,翻出来14年刚开始学docker的时候的好多资料.当时docker刚刚进入国内,还有很多的问题.当时我们的思考方式很简单,docker确实是个好的工具,虽然还不成熟.但是不能因为短 ...
- 深入分析 JDK8 中 HashMap 的原理、实现和优化
HashMap 可以说是使用频率最高的处理键值映射的数据结构,它不保证插入顺序,允许插入 null 的键和值.本文采用 JDK8 中的源码,深入分析 HashMap 的原理.实现和优化.首发于微信公众 ...
- (水题)洛谷 - P1553 - 数字反转(升级版) - 字符串格式转换
https://www.luogu.org/problemnew/show/P1553 忘记给整数加上前导零去除的代码了.其实不去也可以,额外的进位用一个carry另外存起来就好. #include& ...
- tcpdump笔记
最好的学习: man tcpdump ....... 一.TCPdump抓包命令 tcpdump是一个用于截取网络分组,并输出分组内容的工具.tcpdump凭借强大的功能和灵活的截取策略,使其成为类 ...
- html 文本溢出显示省略号 .....
- hibernate Day1 案例代码
1.创建Person类 package com.icss.pojo; public class Person { private int uid; private String uname; priv ...