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 相关文章推荐
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
Aug 02 PHP
php中存储用户ID和密码到mysql数据库的方法
Feb 06 PHP
教你如何使用php session
Oct 28 PHP
PHP字符串的递增和递减示例介绍
Feb 11 PHP
php实现的返回数据格式化类实例
Sep 22 PHP
php获得文件大小和文件创建时间的方法
Mar 13 PHP
php中JSON的使用方法
Apr 30 PHP
手把手编写PHP框架 深入了解MVC运行流程
Sep 19 PHP
Laravel中前端js上传图片到七牛云的示例代码
Sep 04 PHP
利用Laravel生成Gravatar头像地址的优雅方法
Dec 30 PHP
PHPTree――php快速生成无限级分类
Mar 30 PHP
laravel框架数据库配置及操作数据库示例
Oct 10 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中http_build_query 的一个问题
2012/03/25 PHP
PHP empty函数报错解决办法
2014/03/06 PHP
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
Jquery事件的连接使用示例
2013/06/18 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
python调用新浪微博API项目实践
2014/07/28 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
会计试用期自我评价怎么写
2014/09/18 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
铅球加油稿100字
2014/09/26 职场文书
庆七一宣传标语
2014/10/08 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
人力资源部工作计划
2019/05/14 职场文书
Python一些基本的图像操作和处理总结
2021/06/23 Python
Nginx 常用配置
2022/05/15 Servers