php+flash+jQuery多图片上传源码分享
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文件了，技术已经实现了，剩下便是怎样跟数据库进行整合就很简单了，这里不再详解了。
效果图：
关键代码：
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.jb51.net/201607/yuanma/php+flash(jb51.net).rar
更多精彩内容，请点击《jQuery上传操作汇总》，进行深入学习和研究。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
本文实例讲述了PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法.分享给大家供大家参考,具体如下: 很多用户不知道如何复制flash地址,只能在程序中帮他们替换了: <?php /** * 支持优酷.土豆.腾讯视频html到swf转换 */ function convert_html_to_swf($url = '') { if(!is_string($url) || empty($url)) return ; if(strpos($url, 'swf')) return
-
js简单判断flash是否加载完成的方法
本文实例讲述了js简单判断flash是否加载完成的方法.分享给大家供大家参考,具体如下: <script type="text/javascript"> //判定是否加载成功 function checkLoaded(flash){ try{ return Math.floor(flash.PercentLoaded()) == 100 }catch(e){ return false; } } var flash = 'flash对象'; var intervalID =
-
jQuery实现模拟flash头像裁切上传功能示例
本文实例讲述了jQuery实现模拟flash头像裁切上传功能.分享给大家供大家参考,具体如下: 是的,jq已经有类似的插件了,或者干脆用flash算了,为什么我还要自己写?因为造(wo)轮(bu)子(hui)也(flash)是一个学习的过程,轮子不会造,将来怎么造飞机?先来一张最终效果图: 一.大概思路 用js来做这个效果,先得将图片A上传到服务器,关于异步上传的插件有很多,不用插件也可以参考本人上一篇博客用纯js的方式上传,上传之后显示到页面里,由于上传的图片尺寸各不相同,要完整地显示图片,就
-
php获取flash尺寸详细数据的方法
本文实例讲述了php获取flash尺寸详细数据的方法.分享给大家供大家参考,具体如下: 有时我们的网站需要获取flash文件的尺寸信息,php有一个内置的函数可以实现,这个函数就是getimagesize,他可以返回图像的尺寸及文件类型的一个数组. 如果你还想着通过解析swf文件头信息来获取flash文件的尺寸信息,那真的有点走远了,因为从PHP 4开始已经内置getimagesize函数来做这个事,其功能测定任何 GIF,JPG,PNG,SWF,SWC,PSD,TIFF,BMP,IFF,JP2
-
H5实现仿flash效果的实现代码
H5实现仿flash效果的实现代码 随着H5的火热,flash即将被H5所代替,如何利用H5实现flash的效果呢?我做了一个简单的小东西分享给大家. html和js部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/j
-
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
本文实例讲述了jQuery模拟实现经典FLASH导航动画效果的方法.分享给大家供大家参考,具体如下: 一.前言: FLASH在中国互联网发展初期的时候非常的热,各种各样的矢量造型和动作,加上专门配制的音效,让很多人眼前一亮,并且让很多人迷上了这种新兴的媒体,那时候兴起了很多大大小小的专门发布FLASH的网站,印象中记得的像"FLASH闪吧"."FLASH帝国"."闪客天地"等这些都是很火很热的网站,在当时盛极一时,由此也产生了一大批的专门从事FL
-
php+flash+jQuery多图片上传源码分享
flash+php多图片上传的源码,测试成功,一个经典的上传源码,为什么要用flash作为上传的组件呢,其实这里不仅仅是flash,另加了jquery的技术,这样做的目的是为了更好更方便的管理图片,使用过QQ空间进行上传图片的童鞋都知道,QQ空间的上传体验度很好,而且管理我们上传的图片非常的方便,使用的技术基本上就是flash与jquery技术了. flash+jquery是作为前端图片上传展示的,还需要与php的结合才能将图片上传到指定的目标,这里的php一共有两个文件,一个upload.ph
-
jQuery自定义图片上传插件实例代码
摘要 1.jquery自定义插件方法 2.表单file样式调整 3.利用formData,ajax上传图片 4.js,css弹出层 5.springmvc上传图片 效果 调用方式 $("#picUrl").imgUpload({}),在代码内部为调用对象绑定了click事件,点击弹出上传界面. $(function(){ $("#picUrl").imgUpload({url:'<%=basePath%>'+'file/upload.do'}) $(&q
-
jQuery实现图片上传和裁剪插件Croppie
在很多应用需要上传本地图片然后再按尺寸适当裁剪以符合网站对图片尺寸的要求.最常见的就是各用户系统要求用户上传和裁剪头像的应用.今天我给大家介绍的是一款基于HTML5和jQuery的图片上传和裁剪插件,它叫Croppie. 运行效果图: HTML 首先我们将相关js和css文件载入head中. <script src="jquery.min.js"></script> <script src="croppie.min.js"><
-
基于JQuery实现图片上传预览与删除操作
本文实例为大家分享了JQuery实现图片上传预览与删除的具体代码,经测试目前满足谷歌.火狐.360.IE6,7,8,9,10,11等浏览器,供大家参考,具体内容如下 1. preview.2.0.html <!DOCTYPE html> <html> <head> <title>上传图片预览</title> <meta http-equiv="content-type" content="text/html;
-
jquery实现图片上传前本地预览
前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得到的反而是C:\fakepath\a.jpg,这个路径是错误的.百度之后得到说浏览器基于保护用户的相关安全措施,隐藏了上传的真实路径,用fakepath代替,当然,调整浏览器的相关安全设置可以解决这个问题.但我们不可能让所有用户都通过设置浏览器的安全设置来进行图片上传,这种方法在网络交互上显然不现实
-
jquery实现图片上传之前预览的方法
本文实例讲述了jquery实现图片上传之前预览的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
-
jquery实现图片上传前本地预览功能
本文实例为大家分享了jquery实现图片上传前预览的具体代码,供大家参考,具体内容如下 介绍之前有一个小问题,一直找不到图片预览时,图片不出来的原因,原来在于图片的路径!!!一直写的是图片的本地路径,没有什么用.直接上代码. html部分: 复制代码 代码如下: <img id="pic" src="" > <input id="upload" name="file" accept="image/*
-
jQuery实现图片上传预览效果功能完整实例【测试可用】
本文实例讲述了jQuery实现图片上传预览效果功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.jb51.net jquery图片上传预览效果</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.j
-
基于jquery实现图片上传本地预览功能
当我们在上传文件时如果每次都要上传到服务器才可以预览这个做看上合理其实是不合理的,如果网速慢或图片有问题,这样不但浪费客户时间同时也浪费服务器资源了,下面我们介绍利用js上传图片时本地实现预览,希望此方法对各位有所帮助哦. 一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL): 把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来. 在这里,我们需要了解Javascript里File对象.Blob对象和window.U
-
thinkphp jquery实现图片上传和预览效果
先上效果图: 那个file按钮样式先忽略 点击选择图片(浏览),随便选一张图片 js代码如下 //上传图片立即预览 function PreviewImage(imgFile) { var filextension = imgFile.value.substring(imgFile.value .lastIndexOf("."), imgFile.value.length); filextension = filextension.toLowerCase(); if ((filexte