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 相关文章推荐
MySQL修改密码方法总结
Mar 25 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
Apr 07 PHP
php页面消耗内存过大的处理办法
Mar 18 PHP
php文件上传的简单实例
Oct 19 PHP
PHP-Java-Bridge使用笔记
Sep 22 PHP
在Nginx上部署ThinkPHP项目教程
Feb 02 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
Feb 27 PHP
PHP实现的登录,注册及密码修改功能分析
Nov 25 PHP
php实现留言板功能
Mar 05 PHP
可兼容php5与php7的cURL文件上传功能实例分析
May 11 PHP
PHP后台备份MySQL数据库的源码实例
Mar 18 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
Nov 19 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制作静态网站的模板框架(四)
2006/10/09 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
Python运行的17个时新手常见错误小结
2012/08/07 Python
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
Python遍历目录的4种方法实例介绍
2015/04/13 Python
详解Python的Django框架中的中间件
2015/07/24 Python
Python环境变量设置方法
2016/08/28 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
买房子个人收入证明
2014/01/16 职场文书
应用化学专业职业生涯规划书
2014/01/22 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
2016新年慰问信范文
2015/03/25 职场文书
2015年度物流工作总结
2015/04/30 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript