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 相关文章推荐
smarty的保留变量问题
Oct 23 PHP
Uchome1.2 1.5 代码学习 common.php
Apr 24 PHP
PHP跳转页面的几种实现方法详解
Jun 08 PHP
PHP会话处理的10个函数
Aug 11 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
Jun 13 PHP
PHP 闭包详解及实例代码
Sep 28 PHP
thinkPHP批量删除的实现方法分析
Nov 09 PHP
详解如何在云服务器上部署Laravel
Jun 30 PHP
Yii 2中的load()和save()示例详解
Aug 03 PHP
PHP的PDO事务与自动提交
Jan 24 PHP
PHP常用函数之获取汉字首字母功能示例
Oct 21 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
Mar 27 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 Ubb代码编辑器函数代码
2012/07/05 PHP
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
JavaScript学习笔记之惰性函数示例详解
2017/08/27 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
iphone刘海屏页面适配方法
2019/05/07 Javascript
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python 随机生成中文验证码的实例代码
2013/03/20 Python
Python实现豆瓣图片下载的方法
2015/05/25 Python
python opencv读mp4视频的实例
2018/12/07 Python
python实现贪吃蛇双人大战
2020/04/18 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
JAVA代码查错题
2014/10/10 面试题
如何通过jdbc调用存储过程
2012/04/19 面试题
数控加工专业毕业生自荐信
2013/09/27 职场文书
会计岗位职责模板
2014/03/12 职场文书
现金出纳岗位职责
2014/03/15 职场文书
公司委托书格式范文
2014/04/04 职场文书
优秀班组长事迹
2014/05/31 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
高一课前三分钟演讲稿
2014/09/13 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python