08-05更新ThinkPHP+swfupload多图上传实例 经典实用的php多图上传

简介:

先上一张图片给大家看看效果,有需要就下载学习。不一定非要在ThinkPHP里,只是我非常喜欢去用ThinkPHP做开发了。

     wKioL1Mr-0aC72bCAAILmrMA__Y660.jpg

    好了。现在咱们需要的东西是,下载一个swfupload.js网上很多,自己百度吧.之前有人加我QQ说我写的博文大部分都是代码,看不懂,我以后写博文也先说明思路,然后开始贴代码分享

     整个多图上传的流程

    1.写好html代码,包括上传以后显示的效果的html,以及加载swfupload组件.和flash

    2.在添加图片以后上传到php里处理上传并且返回上传图片的地址,加载到预览区域里.

    3.点击X以后,ajax调用php的方法去删除预览区域的图片.

    4.在添加图片和删除预览区域的图片的同时,都会更改一个隐藏域的值,这样在完成整个上传提交表单以后可以把图片的地址保存到数据库.(看需要)

     好了。先写html代码吧。(css文件我就不贴了)

    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!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" >
< head >
< meta  http-equiv = "Content-Type"  content = "text/html; charset=utf-8"  />
< meta  http-equiv = "Cache-control"  content = "private, must-revalidate"  />
< title >flash无刷新多图片上传</ title >
< script  type = "text/javascript" >
var path='__STYLE__';
var url='__URL__';
</ script >
< script  type = "text/javascript"  src = "__STYLE__/js/jquery.js" ></ script >
< script  type = "text/javascript"  src = "__STYLE__/js/swfupload.js" ></ script >
< script  type = "text/javascript"  src = "__STYLE__/js/handlers.js" ></ script >
< link  href = "__STYLE__/css/default.css"  rel = "stylesheet"  type = "text/css"  />
< script  type = "text/javascript" >
var swfu;
window.onload = function () {
swfu = new SWFUpload({
upload_url: "__URL__/uploadImg",
post_params: {"PHPSESSID": "<? php  echo session_id();?>"},
file_size_limit : "2 MB",
file_types : "*.jpg;*.png;*.gif;*.bmp",
file_types_description : "JPG Images",
file_upload_limit : "100",
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete,
button_image_url : "__STYLE__/images/upload.png",
button_placeholder_id : "spanButtonPlaceholder",
button_width: 113,
button_height: 33,
button_text : '',
button_text_style : '.spanButtonPlaceholder { font-family: Helvetica, Arial, sans-serif; font-size: 14pt;} ',
button_text_top_padding: 0,
button_text_left_padding: 0,
button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
button_cursor: SWFUpload.CURSOR.HAND,
flash_url : "__STYLE__/swf/swfupload.swf",
custom_settings : {
upload_target : "divFileProgressContainer"
},
debug: false
});
};
</ script >
</ head >
< body >
< form  action = "__URL__/s"  method = "post" >
< div  style = "width: 610px; height: auto; border: 1px solid #e1e1e1; font-size: 12px; padding: 10px;" >
< span  id = "spanButtonPlaceholder" ></ span >
< div  id = "divFileProgressContainer" ></ div >
< div  id = "thumbnails" >
< ul  id = "pic_list"  style = "margin: 5px;" ></ ul >
< div  style = "clear: both;" ></ div >
</ div >
</ div >
< input  type = "hidden"  name = "s"  id = ""  value = "" />
< input  type = "submit"  value = "提交"  />
</ form >
</ body >
</ html >

 

详细说一下swfupload的配置项

upload_url   是上传图片处理的php地址

file_size_limit   上传大小限制

file_upload_limit    限制用户一次性最多上传多少张图片,0为不限制

file_queue_error_handler

file_dialog_complete_handler   添加文件上传选择框关闭以后执行的方法

upload_error_handler     文件上传错误的时候执行的方法

upload_success_handler   文件上传成功以后执行的方法

upload_complete_handler    文件上传完成以后执行的方法

debug: false     想研究swfupload的可以把这个设置为true,调试模式

接下来就是上传图片的php代码,我就用的TP的上传类,简单,容易懂

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function  uploadImg() {
import( 'ORG.Net.UploadFile' );
$upload  new  UploadFile(); // 实例化上传类
$upload ->maxSize  = 3145728 ; // 设置附件上传大小
$upload ->allowExts  =  array ( 'jpg' 'gif' 'png' 'jpeg' ); // 设置附件上传类型
$savepath = './uploads/' . date ( 'Ymd' ). '/' ;
if  (! file_exists ( $savepath )){
mkdir ( $savepath );
}
$upload ->savePath =   $savepath ; // 设置附件上传目录
if (! $upload ->upload()) { // 上传错误提示错误信息
$this ->error( $upload ->getErrorMsg());
} else { // 上传成功 获取上传文件信息
$info  =   $upload ->getUploadFileInfo();
}
print_r(J(__ROOT__. '/' . $info [0][ 'savepath' ]. '/' . $info [0][ 'savename' ]));
}

 

上传成功以后,echo或者print_r输出地址,因为他用的是ajax的方式。

 

预览区域设置的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function  uploadSuccess(file, serverData){
addImage(serverData);
var  $svalue=$( 'form>input[name=s]' ).val();
if ($svalue== '' ){
$( 'form>input[name=s]' ).val(serverData);
} else {
$( 'form>input[name=s]' ).val($svalue+ "|" +serverData);
}
}
function  addImage(src){
var  newElement =  "<li><img class='content'  src='"  + src +  "' style=\"width:100px;height:100px;\"><img class='button' src=" +window.path+ "/images/fancy_close.png></li>" ;
$( "#pic_list" ).append(newElement);
$( "img.button" ).last().bind( "click" , del);
}

 

serverData就是在php里返回的图片地址,在返回以后,直接调用addImage方法,将地址加载到一个ul里。同时更新隐藏域里的值

删除图片设置

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var  del =  function (){
//    var fid = $(this).parent().prevAll().length + 1;
var  src=$( this ).siblings( 'img' ).attr( 'src' );
var  $svalue=$( 'form>input[name=s]' ).val();
$.ajax({
type:  "GET" //访问WebService使用Post方式请求
url: window.url+ "/del" //调用WebService的地址和方法名称组合---WsURL/方法名
data:  "src="  + src,
success:  function (data){
var  $val=$svalue.replace(data, '' );
$( 'form>input[name=s]' ).val($val);
}
});
$( this ).parent().remove();
}

ajax方式,提交到php方式,成功则更新隐藏域里的val,并且销毁元素。

 

1
2
3
4
5
6
7
8
function  del() {
$src = str_replace (__ROOT__. '/' '' str_replace ( '//' '/' $_GET [ 'src' ]));
if  ( file_exists ( $src )){
unlink( $src );
}
print_r( $_GET [ 'src' ]);
exit ();
}

删除的方法很简单,就是删除ajax提交过来的地址的文件,并且返回删除的地址,ajax会处理并且自动更新隐藏域的val

 


整个ThinkPHP+swfupload上传图片的方法就完了。很简单。 ThinkPHP+swfupload多图上传实例下载链接: http://pan.baidu.com/s/1dD8avap 密码: 7idq










本文转自 3147972 51CTO博客,原文链接:http://blog.51cto.com/a3147972/1381136,如需转载请自行联系原作者
目录
相关文章
|
4月前
|
设计模式 算法 数据库连接
PHP中的设计模式:提高代码的可维护性与扩展性本文旨在探讨PHP中常见的设计模式及其应用,帮助开发者编写出更加灵活、可维护和易于扩展的代码。通过深入浅出的解释和实例演示,我们将了解如何使用设计模式解决实际开发中的问题,并提升代码质量。
在软件开发过程中,设计模式是一套经过验证的解决方案模板,用于处理常见的软件设计问题。PHP作为流行的服务器端脚本语言,也有其特定的设计模式应用。本文将重点介绍几种PHP中常用的设计模式,包括单例模式、工厂模式和策略模式,并通过实际代码示例展示它们的具体用法。同时,我们还将讨论如何在实际项目中合理选择和应用这些设计模式,以提升代码的可维护性和扩展性。
95 4
|
2月前
|
PHP
PHP的pcntl多进程用法实例
PHP使用PCNTL系列的函数也能做到多进程处理一个事务。
39 12
|
3月前
|
设计模式 SQL 安全
PHP中的设计模式:单例模式的深入探索与实践在PHP开发领域,设计模式是解决常见问题的高效方案集合。它们不是具体的代码,而是一种编码和设计经验的总结。单例模式作为设计模式中的一种,确保了一个类仅有一个实例,并提供一个全局访问点。本文将深入探讨单例模式的基本概念、实现方式及其在PHP中的应用。
单例模式在PHP中的应用广泛,尤其在处理数据库连接、日志记录等场景时,能显著提高资源利用率和执行效率。本文从单例模式的定义出发,详细解释了其在PHP中的不同实现方法,并探讨了使用单例模式的优势与注意事项。通过对示例代码的分析,读者将能够理解如何在PHP项目中有效应用单例模式。
|
4月前
|
设计模式 数据库连接 PHP
PHP中的设计模式:如何提高代码的可维护性与扩展性在软件开发领域,PHP 是一种广泛使用的服务器端脚本语言。随着项目规模的扩大和复杂性的增加,保持代码的可维护性和可扩展性变得越来越重要。本文将探讨 PHP 中的设计模式,并通过实例展示如何应用这些模式来提高代码质量。
设计模式是经过验证的解决软件设计问题的方法。它们不是具体的代码,而是一种编码和设计经验的总结。在PHP开发中,合理地使用设计模式可以显著提高代码的可维护性、复用性和扩展性。本文将介绍几种常见的设计模式,包括单例模式、工厂模式和观察者模式,并通过具体的例子展示如何在PHP项目中应用这些模式。
|
4月前
|
设计模式 SQL 安全
PHP中的设计模式:单例模式的深入探索与实践在PHP的编程实践中,设计模式是解决常见软件设计问题的最佳实践。单例模式作为设计模式中的一种,确保一个类只有一个实例,并提供全局访问点,广泛应用于配置管理、日志记录和测试框架等场景。本文将深入探讨单例模式的原理、实现方式及其在PHP中的应用,帮助开发者更好地理解和运用这一设计模式。
在PHP开发中,单例模式通过确保类仅有一个实例并提供一个全局访问点,有效管理和访问共享资源。本文详细介绍了单例模式的概念、PHP实现方式及应用场景,并通过具体代码示例展示如何在PHP中实现单例模式以及如何在实际项目中正确使用它来优化代码结构和性能。
62 2
|
4月前
|
消息中间件 NoSQL Go
PHP转Go系列 | ThinkPHP与Gin框架之Redis延时消息队列技术实践
【9月更文挑战第7天】在从 PHP 的 ThinkPHP 框架迁移到 Go 的 Gin 框架时,涉及 Redis 延时消息队列的技术实践主要包括:理解延时消息队列概念,其能在特定时间处理消息,适用于定时任务等场景;在 ThinkPHP 中使用 Redis 实现延时队列;在 Gin 中结合 Go 的 Redis 客户端库实现类似功能;Go 具有更高性能和简洁性,适合处理大量消息。迁移过程中需考虑业务需求及系统稳定性。
|
5月前
|
前端开发 网络安全 PHP
PHP代码审计之MVC与ThinkPHP简介
PHP代码审计之MVC与ThinkPHP简介
46 2
|
5月前
|
PHP
PHP——安装ThinkPHP框架报错
PHP——安装ThinkPHP框架报错
65 0
|
6月前
|
Java API PHP
【亲测有效,官方提供】php版本企查查api接口请求示例代码,php请求企查查api接口,thinkphp请求企查查api接口
【亲测有效,官方提供】php版本企查查api接口请求示例代码,php请求企查查api接口,thinkphp请求企查查api接口
201 1
|
6月前
|
安全 前端开发 API
PHP框架详解 - ThinkPHP框架
PHP框架详解 - ThinkPHP框架