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使用cookie实现记住用户名和密码实现代码
Apr 27 PHP
隐性调用php程序的方法
Jun 13 PHP
twig里使用js变量的方法
Feb 05 PHP
PHP文件下载实例代码浅析
Aug 17 PHP
thinkphp自带验证码全面解析
Sep 18 PHP
php版微信公众平台实现预约提交后发送email的方法
Sep 26 PHP
Yii框架中sphinx索引配置方法解析
Oct 18 PHP
iis 7下安装laravel 5.4环境的方法教程
Jun 14 PHP
总结PHP代码规范、流程规范、git规范
Jun 18 PHP
Yii2语言国际化自动配置详解
Aug 22 PHP
Laravel等框架模型关联的可用性浅析
Dec 15 PHP
PHP笛卡尔积实现原理及代码实例
Dec 09 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常用的文件操作函数经典收藏
2013/04/02 PHP
PHP中的替代语法介绍
2015/01/09 PHP
php无序树实现方法
2015/07/28 PHP
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
2015/03/01 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
通过Pandas读取大文件的实例
2018/06/07 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
Python如何操作docker redis过程解析
2020/08/10 Python
Django视图类型总结
2021/02/17 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
采购员的工作职责
2013/12/26 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
城南旧事观后感
2015/06/11 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis