php+flash+jQuery多图片上传源码分享


Posted in PHP onJuly 27, 2020

flash+php多图片上传的源码,测试成功,一个经典的上传源码,为什么要用flash作为上传的组件呢,其实这里不仅仅是flash,另加了jquery的技术,这样做的目的是为了更好更方便的管理图片,使用过QQ空间进行上传图片的童鞋都知道,QQ空间的上传体验度很好,而且管理我们上传的图片非常的方便,使用的技术基本上就是flash与jquery技术了。

flash+jquery是作为前端图片上传展示的,还需要与php的结合才能将图片上传到指定的目标,这里的php一共有两个文件,一个upload.php 是上传的核心代码,index.php 便是整合 flash+php+jquery 技术的结合,将提交上来的图片上传到目录 upload 下面,另外还有一个文件夹 images,这里面便是调用的 upload.swf flash文件和jquery.js文件了,技术已经实现了,剩下便是怎样跟数据库进行整合就很简单了,这里不再详解了。

效果图:

php+flash+jQuery多图片上传源码分享

关键代码:

upload.php

<?php

 $uploaddir = 'upload/';
 $filename = date("Ymdhis").rand(100,999);
 $uploadfile = $uploaddir . $filename.substr($_FILES['Filedata']["name"],strrpos($_FILES['Filedata']["name"],"."));
 $temploadfile = $_FILES['Filedata']['tmp_name'];
 move_uploaded_file($temploadfile , $uploadfile);

 //返回数据 在页面上js做处理
 $filedata = array(
 'result' => 'true',
 'name' => $_FILES['Filedata']["name"],
 'filepath' => $uploadfile,
 );
 echo json_encode($filedata);
 exit;

index.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>swfupload</title>
<script src="images/jquery.js" type="text/javascript"></script>
<script>
 /*上传错误信息提示*/
 function showmessage(message){alert(message);}
 /*显示文件名称*/
 function setfilename(ID,filename){
 ID = replaceStr(ID);
 var htmls = '<li id="'+ID+'"><p>'+filename+'</p><p class="load">0%</p></li>';
 $("#uploadPut").append(htmls);
 }
 /*显示上传进度*/
 function setfileload(ID,load){
 ID = replaceStr(ID);
 $("#"+ID+" .load").html(load);
 }
 /*返回服务上传的数据*/
 function setfilepath(ID,data){
 ID = replaceStr(ID);
 var s = eval('('+data+')');
 if(s.result=="true"){
 $("#"+ID).html("<img id='"+s.id+"' src='"+s.filepath+"'/><br/>"+s.name);
 }else{
 $("#"+ID).html(s.name+"上传失败");
 }
 }
 /*替换特殊字符*/
 function replaceStr(ID){
 var reg = new RegExp("[=,/,\,?,%,#,&,(,),!,+,-,},{,:,>,<]","g"); //创建正则RegExp对象
 var ID = ID.replace(reg,"");
 return ID;
 }
</script>
</head>
<style>
 .main{ width:610px; height:0px auto; border:1px solid #e1e1e1; font-size:12px; padding:10px;}
 .main p{ line-height:10px; width:500px; float:right; text-indent:20px;}
 .uploadPut{ width:100%; clear:both;}
 ul,li{ margin:0px; padding:0px; list-style:none}
 .uploadPut li{width:120px; padding:10px; text-align:center; border:1px solid #ccc; overflow:hidden; background-color:#e1e1e1; line-height:25px; float:left; margin:5px}
 .uploadPut img{ width:120px; height:90px;}
</style>
<body>
 <div class="main"> 
 <?php
 //获取项目跟路径
 $baseURL = 'http://' . $_SERVER ['SERVER_NAME'] . (($_SERVER ['SERVER_PORT'] == 80) ? '' : ':' . $_SERVER ['SERVER_PORT']) . ((($path = str_ireplace('\\', '/', dirname ( $_SERVER ['SCRIPT_NAME'] ))) == '/') ? '' : $path);
 
 
 //设置swfupload参数
 $flashvars = 'uploadURL=' . urlencode($baseURL . '/upload.php'); #上传提交地址
 $flashvars.= '&buttonImageURL=' . urlencode($baseURL . '/images/upload.png'); #按钮背景图片
 $flashvars.= '&btnWidth=95';    #按钮宽度
 $flashvars.= '&btnHeight=35';    #按钮高度
 $flashvars.= '&fileNumber=20';    #每次最多上传20个文件
 $flashvars.= '&fileSize=200';   #单个文件上传大小为20M
 $flashvars.= '&bgColor=#ffffff';    #背景颜色
 $flashvars.= '&fileTypesDescription=Images';   #选择文件类型
 $flashvars.= '&fileType=*.jpg;*.png;*.gif;*.jpeg';   #选择文件后缀名 
 
 ?>
 <object style="float: left;" width="95" height="35" data="images/upload.swf" type="application/x-shockwave-flash">
 <param value="transparent" name="wmode">
 <param value="images/upload.swf" name="movie">
 <param value="high" name="quality">
 <param value="false" name="menu">
 <param value="always" name="allowScriptAccess">
 <param value="<?php echo $flashvars;?>" name="flashvars">
 </object>
 <p>允许上传格式 JPG, GIF, JEPG, PNG ,每个文件不超过20MB,一次可上传多20张!</p>
 
 <div class="uploadPut">
 <ul id="uploadPut">
 
 </ul>
 <div style="clear: both;"></div>
 </div>
 
 </div>
</body>
</html>

其实这种组合的上传技术在许多大型的网站上面都有,更多的是应用在图片的管理上面,比如 51 空间的图片管理,基本功能都是类似的,重要的一定要学习一下 flash 与 php 之间的通信技术,在大型的开发中,这种技术会经常出现的。

源码下载:http://xiazai.3water.com/201607/yuanma/php+flash(3water.com).rar

更多精彩内容,请点击《jQuery上传操作汇总》,进行深入学习和研究。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
PHP 和 MySQL 基础教程(三)
Oct 09 PHP
php中的一个中文字符串截取函数
Feb 14 PHP
mysql5的sql文件导入到mysql4的方法
Oct 19 PHP
PHP文件上传原理简单分析
May 29 PHP
基于PHP输出缓存(output_buffering)的深入理解
Jun 13 PHP
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
Apr 05 PHP
ThinkPHP模板自定义标签使用方法
Jun 26 PHP
PHP获取一段文本显示点阵宽度和高度的方法
Mar 12 PHP
PHP嵌套输出缓冲代码实例
May 12 PHP
使用PHP接受文件并获得其后缀名的方法
Aug 05 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
May 20 PHP
laravel异步监控定时调度器实例详解
Jun 21 PHP
php安装ssh2扩展的方法【Linux平台】
Jul 20 #PHP
值得分享的php+ajax实时聊天室
Jul 20 #PHP
php验证身份证号码正确性的函数
Jul 20 #PHP
PHP加密解密类实例代码
Jul 20 #PHP
php图片添加水印例子
Jul 20 #PHP
支付宝服务窗API接口开发php版本
Jul 20 #PHP
PHP二维数组矩形转置实例
Jul 20 #PHP
You might like
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
php堆排序(heapsort)练习
2013/11/13 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
2014/05/08 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
学习Vue组件实例
2018/04/28 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
Python简单的制作图片验证码实例
2017/05/31 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
h5封装下拉刷新
2020/08/25 HTML / CSS
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
自我反省检讨书
2014/01/23 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
银行自荐信怎么写
2015/03/05 职场文书
ROS系统将python包编译为可执行文件的简单步骤
2021/07/25 Python