php怎么实现多图上传

本文操作环境:windows7系统、thinkPHP v5.1版、DELL G3电脑

php怎么实现多图上传?

php实现多图上传的方法:

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

0cc1794b573d37626e39bc142c21f15.png

【准备工作】现在需要的东西是,下载一个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="https://www.lsjlt.com/skin/default/image/lazy.gif" class="lazy" data-original=""+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上传图片的方法就完成了,很简单~

--结束END--

本文标题: php怎么实现多图上传

本文链接: https://www.lsjlt.com/news/461.html (转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢

  • php怎么实现多图上传

    php实现多图上传的方法:1、创建html代码并加载swfupload组件和flash;2、在php里处理上传并且返回上传图片的地址;3、通过ajax调用php;4、把图片的地址保存到数据库即可。
    阅读数:884 php
  • php 怎么一次实现多个照片上传

    php一次实现多个照片上传的方法:1、创建index.html文件;2、创建连接数据库conn.php文件;3、创建图片处理upload.php文件;4、通过“if($error == UPLOAD_ERR_OK){...}”实现上传即可。
    阅读数:108 php 照片上传
  • php如何实现上传限制

    这篇文章主要为大家展示了“php如何实现上传限制”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“php如何实现上传限制”这篇文章吧。上传限制在这个脚本中,我们增加了对文件上传的限制。用户只能上传
    阅读数:918 php
  • php如何实现头像上传

    php实现头像上传的方法:【<?php if($_FILES["file"]["error"]){echo $_FILES["file"]["error"];}else{if(($_FILES["file"]["type"]=="...】。
    阅读数:701 php 头像
  • php怎么设置上传图片大小

    php设置上传图片大小的方法:1、打开“php.conf”文件;2、设置“ini_set('max_input_time','90');”;3、设置“ini_set('post_max_size', '12M');”等等。
    阅读数:802 php
  • php files上传错误怎么办

    php files上传错误的解决办法:1、打开php.ini文件;2、将“upload_tmp_dir”项前面的分号去掉,并在后面添加好路径为“upload_tmp_dir ="C:/windows/temp"”;3、设置“upload_max_filesize”选项限制的值即可。
    阅读数:122 php
  • php没有文件被上传怎么办

    php没有文件被上传的解决办法:1、修改php.ini,设置上传文件的大小;2、在httpd.conf中添加“php_value upload_max_filesize "300M"”;3、重启服务器即可。
    阅读数:929 php
  • php中怎么利用ajax实现无刷新上传图片功能

    php中怎么利用ajax实现无刷新上传图片功能,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。Ajax file upload sample
    阅读数:941 ajax php
  • php如何上传pdf文件

    这篇文章主要介绍“php如何上传pdf文件”,在日常操作中,相信很多人在php如何上传pdf文件问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”php如何上传pdf文件”的疑惑有所帮助!接下来,请跟着小编一起来
    阅读数:625 php pdf
  • php如何创建上传脚本

    这篇文章主要为大家展示了“php如何创建上传脚本”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“php如何创建上传脚本”这篇文章吧。创建上传脚本"upload_file.php" 文件含有供上传文
    阅读数:934 php
  • php 无法上传大图片怎么办

    php无法上传大图片的解决办法:1、打开php.ini;2、查找post_max_size并设置为自己需要的值;3、确认“file_uploads = on”;4、设置一个有效目录;5、设置允许上传文件大小的最大值。
    阅读数:529 php
  • PHP利用ueditor实现上传图片添加水印

    在上传图片时,有时需要添加水印。如果每个都用PS添加的话,会有些麻烦。本文将为大家介绍PHP如何利用ueditor实现上传图片添加水印,感兴趣的可以了解一下
  • 怎么用PHP+Ajax实现无刷新上传头像图片预览功能

    这篇文章主要讲解了“怎么用PHP+Ajax实现无刷新上传头像图片预览功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用PHP+Ajax实现无刷新上传头像图片预览功能”吧!上传头像区域
    阅读数:216 php ajax
  • php怎么实现telnet

    php实现telnet的方法:1、创建一个PHP示例文件;2、通过“class PHPTelnet {function Connect($server,$user,$pass) {...}}”方式实现telnet功能即可。
    阅读数:240 php telnet
  • php怎么实现翻译

    php实现翻译的方法:1、创建一个PHP示例文件;2、通过有道翻译json格式来显示传值;3、利用PHP自带的函数,抓取URL返回的json数据;4、将json数据转换成对象类的形式即可。
    阅读数:306 php 翻译
  • php怎么实现ping

    php实现ping功能的方法:1、在php.ini中开通exec函数;2、创建一个PHP示例文件;3、通过“function ping_time($ip) {...}”方法实现ping功能即可。
    阅读数:224 php
  • php怎么实现日历

    php实现日历的方法:1、创建一个PHP示例文件并设置编码为utf-8;2、创建table表格;3、通过mktime等函数获取时间日期;4、通过for循环实现日历功能即可。
    阅读数:707 PHP 日历
  • php怎么实现翻页

    php实现翻页的方法:1、查询所有符合条件需要进行分页的总数据,计算展示的总页数;2、获取当前显示的是第几页信息;3、根据限制条件查询出当前页所需显示出来的数据;4、将每一条数据echo替换HTML结构内容中,最后显示出来即可。
    阅读数:577 php 翻页
  • php怎么实现校检

    php实现校检的方法:1、声明“session_start();”函数;2、创建验证码实现的代码;3、在验证码实现之前声明一个空变量,用来存放验证码;4、用POST方式来接收验证码即可。
    阅读数:131 php 校检
  • php怎么实现群发

    php实现群发的方法:1、获取第三方的接口api;2、通过“function http_request($url,$data = null){...}”代码发送请求;3、直接调用第三方的url地址,并根据要求的接口传参数即可。
    阅读数:808 php 群发短信