PHP之：多图上传

撰写日期：2016-6-30 15:17:35 Thursday

参考 http://a3147972.blog.51cto.com/2366547/1381136 (08-05ThinkPHP+swfupload多图上传实例经典实用的php多图上传 2014-03-21 17:05:32)

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

【准备工作】现在需要的东西是，下载一个swfupload.js网上很多，自己百度吧。先说明思路或流程，然后再上代码。

整个多图上传的流程

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

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

3.点击每张图片右上角的 X 以后，ajax调用php的方法去删除预览区域的图片。

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

【代码部分】先写html代码。(css文件就不贴了)

<!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的上传类，简单，容易懂

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的方式。

预览区域设置的代码

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里。同时更新隐藏域里的值

删除图片设置

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，并且销毁元素。

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上传图片的方法就完成了，很简单~

更新时间：2016-6-30 15:34:31 Thursday

PHP之：多图上传的更多相关文章

yii2组件之多图上传插件FileInput的详细使用
作者:白狼出处:http://www.manks.top/yii2_multiply_images.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连 ...
iOS 使用AFN 进行单图和多图上传
图片上传时必要将图片进行压缩,不然会上传失败 1.单张图上传 AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationManag ...
微信jssdk，实现多图上传的一点心得
一.首先在common.js里封装一个函数,在需要调用jsSDK的页面引用此方法即可实现微信的信息配置function signatureJSSDK() { var url = window.loca ...
JS案例之4——Ajax多图上传
近期项目中有好几次用到多图上传,第一次在项目中真正用到Ajax技术,稍微整理了下,贴个案例出来. 我们传统的做法是当用户提交一个表单时,就向web服务器端发送一个请求.服务器接受并处理传来的表单信息, ...
微信企业号办公系统-JSSDK上传图片（多图上传）
在开发微信企业号办公系统中,涉及到了图片上传功能,一开始使用的flash插件上传方法,在苹果手机上可以调用相机直接拍摄照片,但在安卓手机上只能选择照片. 微信jssdk-api带有一套完整的调用选择本 ...
thinkphp3.2.x多图上传并且生成多张缩略图
html部分 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" con ...
thinkphp5多图上传 js部分
在项目中常会用到多图上上传,那就需要多图上传后需要预览,并且能删掉传错(不想传)的图,然而测试了半天并不知道jq怎么写,parent()parents()用了半天无果,罢了,还是用原生js来写.这 ...
springBoot+ vue+ Element-ui实现合并多图上传（一次请求多张图片）
这次上传使用的是Elemet-ui的uoload上传组件,组件预留的钩子回调还是比较充足的. 1: 实现多图上传主要用到以下两个属性: 下面讲一下属性使用: <el-upload :actio ...
ueditor编辑器多图上传为什么顺序打乱了
我上一个版本用的是ueditor1.3.6,自从1.4.2版以后,“前端上传模块统一改用webuploader”,ueditor在多图上传一直考虑漏掉了图片顺序的问题. 我的网站在用户上传图片文章的时 ...

随机推荐

DOM Document节点类型详解
在前面 DOM 概况中,我们知道了 DOM 总共有 12 个节点类型,今天我们就来讲下 DOM 中最重要的节点类型之一的 document 节点类型. 1.概况 Javascript 通过 Docu ...
一步一步学习ABP项目系列文章目录
1.概述基于DDD的.NET开发框架 - ABP初探基于DDD的.NET开发框架 - ABP分层设计基于DDD的.NET开发框架 - ABP模块设计基于DDD的.NET开发框架 - ABP启动 ...
Scala入门详解
object作为Scala中的一个关键字,相当于Java中的public static class这样的一个修饰符,也就说object中的成员都是静态的! 所以我们在这个例子中的main方法是静态的, ...
将IList转换为List
简单点说,IList<T>直接转换为List<T>可以不用考虑.IList<T>可以用至少2种方式简单的复制成List<T>:1.IList<T ...
We Know What @You #Tag: Does the Dual Role Affect Hashtag Adoption-20160520
分析类的论文 1.Information publication:www2012 author: Mei qiao zhu 2.What 微博中的hashtag既可以表示谈论的内容,又可以代表一个群体 ...
BroadcastReceive之ip拨号
首先,新建一个类,继承于BroadcastReceive,然后去配置Manifest.xml <receiver android:name=".PhoneOnReceice" ...
68 id -显示用户的id
Linux id命令用于显示用户的ID,以及所属群组的ID. id会显示用户以及所属群组的实际与有效ID.若两个ID相同,则仅显示实际ID.若仅指定用户名称,则显示目前用户的ID. 语法 id [-g ...
RabbitMQ官方中文入门教程(PHP版) 第三部分:发布／订阅（Publish/Subscribe）
发布/订阅在上篇教程中,我们搭建了一个工作队列.每个任务之分发给一个工作者(worker).在本篇教程中,我们要做的之前完全不一样——分发一个消息给多个消费者(consumers).这种模式被称为“ ...
C#利用iComparable接口实现List排序
List<T>类可以使用Sort()方法对元素排序. Sort()方法定义了几个重载方法,分别是 public void List<T>.Sort(),不带有任何参数的Sor ...
HttpModule与HttpHandler详解
ASP.NET对请求处理的过程:当请求一个*.aspx文件的时候,这个请求会被inetinfo.exe进程截获,它判断文件的后缀(aspx)之后,将这个请求转交给 ASPNET_ISAPI.dll,A ...

PHP之：多图上传

PHP之：多图上传的更多相关文章

随机推荐

热门专题