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

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

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

整个多图上传的流程

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

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

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

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

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

<code><</code><code>html</code> <code>xmlns</code><code>=</code><code>"http://www.w3.org/1999/xhtml"</code><code>></code>

<code><</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"Content-Type"</code> <code>content</code><code>=</code><code>"text/html; charset=utf-8"</code> <code>/></code>

<code><</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"Cache-control"</code> <code>content</code><code>=</code><code>"private, must-revalidate"</code> <code>/></code>

<code><</code><code>title</code><code>>flash无刷新多图片上传</</code><code>title</code><code>></code>

<code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>></code>

<code>var path='__STYLE__';</code>

<code></</code><code>script</code><code>></code>

<code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"__STYLE__/js/jquery.js"</code><code>></</code><code>script</code><code>></code>

<code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"__STYLE__/js/swfupload.js"</code><code>></</code><code>script</code><code>></code>

<code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"__STYLE__/js/handlers.js"</code><code>></</code><code>script</code><code>></code>

<code><</code><code>link</code> <code>href</code><code>=</code><code>"__STYLE__/css/default.css"</code> <code>rel</code><code>=</code><code>"stylesheet"</code> <code>type</code><code>=</code><code>"text/css"</code> <code>/></code>

<code>window.onload = function () {</code>

<code>swfu = new SWFUpload({</code>

<code>upload_url: "__URL__/uploadImg",</code>

<code>post_params: {"PHPSESSID": "<?</code><code>php</code> <code>echo session_id();?>"},</code>

<code>file_size_limit : "2 MB",</code>

<code>file_types : "*.jpg;*.png;*.gif;*.bmp",</code>

<code>file_types_description : "JPG Images",</code>

<code>file_upload_limit : "100",</code>

<code>file_queue_error_handler : fileQueueError,</code>

<code>file_dialog_complete_handler : fileDialogComplete,</code>

<code>upload_progress_handler : uploadProgress,</code>

<code>upload_error_handler : uploadError,</code>

<code>upload_success_handler : uploadSuccess,</code>

<code>upload_complete_handler : uploadComplete,</code>

<code>button_image_url : "__STYLE__/images/upload.png",</code>

<code>button_placeholder_id : "spanButtonPlaceholder",</code>

<code>button_width: 113,</code>

<code>button_height: 33,</code>

<code>button_text : '',</code>

<code>button_text_style : '.spanButtonPlaceholder { font-family: Helvetica, Arial, sans-serif; font-size: 14pt;} ',</code>

<code>button_text_top_padding: 0,</code>

<code>button_text_left_padding: 0,</code>

<code>button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,</code>

<code>button_cursor: SWFUpload.CURSOR.HAND,</code>

<code>flash_url : "__STYLE__/swf/swfupload.swf",</code>

<code>custom_settings : {</code>

<code>upload_target : "divFileProgressContainer"</code>

<code>debug: false</code>

<code><</code><code>form</code> <code>action</code><code>=</code><code>"__URL__/s"</code> <code>method</code><code>=</code><code>"post"</code><code>></code>

<code><</code><code>div</code> <code>style</code><code>=</code><code>"width: 610px; height: auto; border: 1px solid #e1e1e1; font-size: 12px; padding: 10px;"</code><code>></code>

<code><</code><code>span</code> <code>id</code><code>=</code><code>"spanButtonPlaceholder"</code><code>></</code><code>span</code><code>></code>

<code><</code><code>div</code> <code>id</code><code>=</code><code>"divFileProgressContainer"</code><code>></</code><code>div</code><code>></code>

<code><</code><code>div</code> <code>id</code><code>=</code><code>"thumbnails"</code><code>></code>

<code><</code><code>ul</code> <code>id</code><code>=</code><code>"pic_list"</code> <code>style</code><code>=</code><code>"margin: 5px;"</code><code>></</code><code>ul</code><code>></code>

<code><</code><code>div</code> <code>style</code><code>=</code><code>"clear: both;"</code><code>></</code><code>div</code><code>></code>

<code><</code><code>input</code> <code>type</code><code>=</code><code>"hidden"</code> <code>name</code><code>=</code><code>"s"</code> <code>id</code><code>=</code><code>""</code> <code>value</code><code>=</code><code>""</code><code>/></code>

<code><</code><code>input</code> <code>type</code><code>=</code><code>"submit"</code> <code>value</code><code>=</code><code>"提交"</code> <code>/></code>

详细说一下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的上传类，简单，容易懂

<code>function</code> <code>uploadImg() {</code>

<code>import(</code><code>'ORG.Net.UploadFile'</code><code>);</code>

<code>$upload</code> <code>= </code><code>new</code> <code>UploadFile();</code><code>// 实例化上传类</code>

<code>$upload</code><code>->maxSize = 3145728 ;</code><code>// 设置附件上传大小</code>

<code>$upload</code><code>->allowExts = </code><code>array</code><code>(</code><code>'jpg'</code><code>, </code><code>'gif'</code><code>, </code><code>'png'</code><code>, </code><code>'jpeg'</code><code>);</code><code>// 设置附件上传类型</code>

<code>$savepath</code><code>=</code><code>'./uploads/'</code><code>.</code><code>date</code><code>(</code><code>'Ymd'</code><code>).</code><code>'/'</code><code>;</code>

<code>if</code> <code>(!</code><code>file_exists</code><code>(</code><code>$savepath</code><code>)){</code>

<code>mkdir</code><code>(</code><code>$savepath</code><code>);</code>

<code>$upload</code><code>->savePath = </code><code>$savepath</code><code>;</code><code>// 设置附件上传目录</code>

<code>if</code><code>(!</code><code>$upload</code><code>->upload()) {</code><code>// 上传错误提示错误信息</code>

<code>$this</code><code>->error(</code><code>$upload</code><code>->getErrorMsg());</code>

<code>}</code><code>else</code><code>{</code><code>// 上传成功获取上传文件信息</code>

<code>$info</code> <code>= </code><code>$upload</code><code>->getUploadFileInfo();</code>

<code>print_r(J(__ROOT__.</code><code>'/'</code><code>.</code><code>$info</code><code>[0][</code><code>'savepath'</code><code>].</code><code>'/'</code><code>.</code><code>$info</code><code>[0][</code><code>'savename'</code><code>]));</code>

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

预览区域设置的代码

<code>function</code> <code>uploadSuccess(file, serverData){</code>

<code>addImage(serverData);</code>

<code>var</code> <code>$svalue=$(</code><code>'form>input[name=s]'</code><code>).val();</code>

<code>if</code><code>($svalue==</code><code>''</code><code>){</code>

<code>$(</code><code>'form>input[name=s]'</code><code>).val(serverData);</code>

<code>$(</code><code>'form>input[name=s]'</code><code>).val($svalue+</code><code>"|"</code><code>+serverData);</code>

<code>function</code> <code>addImage(src){</code>

<code>var</code> <code>newElement = </code><code>"<li><img class='content' src='"</code> <code>+ src + </code><code>"' style=\"width:100px;height:100px;\"><img class='button' src="</code><code>+window.path+</code><code>"/images/fancy_close.png></li>"</code><code>;</code>

<code>$(</code><code>"#pic_list"</code><code>).append(newElement);</code>

<code>$(</code><code>"img.button"</code><code>).last().bind(</code><code>"click"</code><code>, del);</code>

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

删除图片设置

<code>var</code> <code>del = </code><code>function</code><code>(){</code>

<code>// var fid = $(this).parent().prevAll().length + 1;</code>

<code>var</code> <code>src=$(</code><code>this</code><code>).siblings(</code><code>'img'</code><code>).attr(</code><code>'src'</code><code>);</code>

<code>type: </code><code>"GET"</code><code>, </code><code>//访问WebService使用Post方式请求</code>

<code>url: window.url+</code><code>"/del"</code><code>, </code><code>//调用WebService的地址和方法名称组合---WsURL/方法名</code>

<code>success: </code><code>function</code><code>(data){</code>

<code>var</code> <code>$val=$svalue.replace(data,</code><code>''</code><code>);</code>

<code>$(</code><code>'form>input[name=s]'</code><code>).val($val);</code>

<code>$(</code><code>this</code><code>).parent().remove();</code>

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

<code>function</code> <code>del() {</code>

<code>$src</code><code>=</code><code>str_replace</code><code>(__ROOT__.</code><code>'/'</code><code>, </code><code>''</code><code>, </code><code>str_replace</code><code>(</code><code>'//'</code><code>, </code><code>'/'</code><code>, </code><code>$_GET</code><code>[</code><code>'src'</code><code>]));</code>

<code>if</code> <code>(</code><code>file_exists</code><code>(</code><code>$src</code><code>)){</code>

<code>unlink(</code><code>$src</code><code>);</code>

<code>print_r(</code><code>$_GET</code><code>[</code><code>'src'</code><code>]);</code>

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

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

本文转自 3147972 51CTO博客，原文链接：http://blog.51cto.com/a3147972/1381136，如需转载请自行联系原作者

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

继续阅读

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

版本号隐藏

Apache配置SSLApache配置SSL

配置apache支持PHP（win7）

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

适用于JavaScript的ECMAScript 2020规范向前发展

Cloud Studio初体验

NOSQL安全攻击

JS生成uuid的四种方法

php 去掉字符串的最后一个字符及截取原字符串1,2,3,4,5,6,

php——水印

layui多任务上传添加进度条

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

继续阅读

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