php文件上传学习记录
1.多文件上传及预览功能效果:
代码分两部分:
1.index02.html
2.file_preview.php
1.index02.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
ul,ol{
list-style-type:none;
}
.clearfix:after,.clearfix:before{
display:table;
content:' ';
}
.clearfix:after{
clear:both
}
.tc{
text-align:center;
}
.select,.select_video{
height:2rem;
line-height:2rem;
background:#fff;
border:1px solid #4285F4;
margin:0.5rem 1rem;
position:relative;
}
.select label,.select_video label{
width:100%;
position:absolute;
top:0;
left:0;
font-size:14px;
color:#333;
}
#upload,#upload_video{
display:none;
}
.preview,.video_preview{
margin:0.5rem 1rem;
border:1px solid #bbb;
padding:4px;
display:none;
}
.preview_img_list li{
float:left;
width:25%;
padding:2px 0;
}
.preview_img_list li img{
vertical-align:top;
max-width:98%;
}
.btn{
background: #4285F4;
color:#fff;
height:2.5rem;
line-height:2.5rem;
margin:2rem 1rem;
border-radius:0.5rem;
}
</style>
<script>
window.onload = function(){
var uploadBtn = document.querySelector('#upload');
var previewImgList = document.querySelector('.preview_img_list');
var uploadVideo = document.querySelector('#upload_video');
var submitBtn = document.querySelector('.submit');
imgArr = new Array();
uploadBtn.addEventListener('change',function(){
var imgLen = this.files.length;
var liLen = previewImgList.getElementsByTagName('li').length;
var ImgLen = imgLen + liLen ;
if(ImgLen > 3){
alert("上传最大数量不能大于3");
return false;
}
document.querySelector(".preview").style.display = 'block';
for (var i = 0; i < imgLen;i++) {
var file = this.files[i];
var imgType = /^image\//;
if (!imgType.test(file.type)) {
continue;
}
var li = document.createElement('li');
var img = document.createElement("img");
li.appendChild(img);
previewImgList.appendChild(li);
var reader = new FileReader();
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; initHW(); imgArr.push(e.target.result);}; })(img);
reader.readAsDataURL(file);
// var objectUrl = window.URL.createObjectURL(file);
// img.src = objectUrl;
}
},false);
/* uploadVideo.addEventListener('change',function(){
var file = this.files[0];
var videoType = /^video\//;
if(!videoType.test(file.type)){
alert("所选文件不是合法的视频文件");
return false;
}
var pv = document.querySelector('.video_preview');
var video = document.createElement('video');
video.setAttribute('controls','controls');
video.style.width = "100%";
pv.appendChild(video);
pv.style.display = "block";
// var objectUrl = window.URL.createObjectURL(file);
// video.src = objectUrl;
//
var reader = new FileReader();
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(video);
reader.readAsDataURL(file);
video.play();
},false);*/
submitBtn.addEventListener('click',function(){
if(!imgArr.length){
alert('请选择要上传的图片');
return false;
}
var form = document.querySelector('form');
var fd = new FormData(form);
for(var i = 0;i < imgArr.length;i++){
fd.append('file[]',imgArr[i]);
}
var request = new XMLHttpRequest();
var url = "./file_preview.php";
request.open('post',url);
request.send(fd);
},false);
}
// 初始化图片宽度
// 使得图片高度一致
function initHW(){
var previewImgList = document.querySelector('.preview_img_list');
var Lis = previewImgList.getElementsByTagName('li');
var LisLen = Lis.length;
if(LisLen > 1){
var img = Lis[0].getElementsByTagName('img')[0];
var imgW = img.width;
var imgH = img.height;
for(var i = 1; i < LisLen; i++){
var img = Lis[i].getElementsByTagName('img')[0];
img.style.width = imgW + 'px';
img.style.height = imgH + 'px';
}
}
}
</script>
</head>
<body>
<h2 class = "tc">图片上传及预览</h2>
<form action="" >
用户名:<input type="text" name="name"/>
<div class="select tc" >
<label for="upload">图片上传及预览</label>
<input type="file" id = "upload" multiple="multiple" accpet = "image/*" capture = "camera" >
</div>
<div class="preview">
<ul class = "preview_img_list clearfix">
</ul>
</div>
<div class="select_video tc">
<label for="upload_video">视频上传及预览</label>
<input type="file" id = "upload_video" accpet = "video/*" capture = "camcorder">
</div>
<div class="video_preview">
</div>
<div class="submit btn tc">上传</div>
</form>
</body>
</html>
2.file_preview.php:
<?php
$name = $_POST['name'];
$imgCount = count($_POST['file']);
for ($i = 0; $i < $imgCount; $i++) {
if(preg_match('/^(data:\s*image\/(\w+);base64,)/',$_POST['file'][$i],$result)){
$ImageType = $result[2];
$res = str_replace($result[0],'',$_POST['file'][$i]);
$filePath = './';
$fileName = date('Y-m-d',time())."-".time().$name.'.'.$ImageType;
file_put_contents($filePath.$fileName,base64_decode($res));
} else {
return false;
}
}
原文链接:点击打开链接
这里给出 三种方式的统一实现
下面先给出各种方式的文件提交页面:
单个文件上传 upload1.php
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>单文件上传</title>
- </head>
- <body>
- <form action="doAction5.php" method="post" enctype="multipart/form-data">
- 请选择您要上传的文件:
- <input type="file" name="myFile"/><br/>
- <input type="submit" value="上传文件"/>
- </form>
- </body>
- </html>
多个单文件上传 upload2.php
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>多个单文件上传</title>
- </head>
- <body>
- <form action="doAction5.php" method="post" enctype="multipart/form-data">
- 请选择您要上传的文件:<input type="file" name="myFile1"/><br/>
- 请选择您要上传的文件:<input type="file" name="myFile2"/><br/>
- 请选择您要上传的文件:<input type="file" name="myFile3"/><br/>
- 请选择您要上传的文件:<input type="file" name="myFile4"/><br/>
- <input type="submit" value="上传文件"/>
- </form>
- </body>
- </html>
多文件上传 upload3.php
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>多文件上传</title>
- </head>
- <body>
- <form action="doAction5.php" method="post" enctype="multipart/form-data">
- 请选择您要上传的文件:<input type="file" name="myFile[]"/><br/>
- 请选择您要上传的文件:<input type="file" name="myFile[]"/><br/>
- 请选择您要上传的文件:<input type="file" name="myFile[]"/><br/>
- 请选择您要上传的文件:<input type="file" name="myFile[]"/><br/>
- <input type="submit" value="上传文件"/>
- </form>
- </body>
- </html>
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>混合方式文件上传</title>
- </head>
- <body>
- <form action="doAction5.php" method="post" enctype="multipart/form-data">
- 请选择您要上传的文件:<input type="file" name="myFile1"/><br/>
- 请选择您要上传的文件:<input type="file" name="myFile2"/><br/>
- 请选择您要上传的文件:<input type="file" name="myFile[]"/><br/>
- 请选择您要上传的文件:<input type="file" name="myFile[]"/><br/>
- 请选择您要上传的文件:<input type="file" name="myFile[]" multiple="multiple"/><br/>
- <input type="submit" value="上传文件"/>
- </form>
- </body>
- </html>
文件上传处理 doAction5.php
- <?php
- /**
- */
- header('content-type:text/html;charset=utf-8');
- include_once 'upload.func.php';
- $files = getFiles();
- //print_r($files);
- foreach($files as $fileInfo) {
- $res = uploadFile($fileInfo);
- echo $res['mes'],'<br/>';
- if(isset($res['dest'])) {
- $uploadFiles[] = $res['dest'];
- }
- }
- //过滤掉上传失败的文件
- /**
- * array_values() 函数返回一个包含给定数组中所有键值的数组,但不保留键名。
- * 提示:被返回的数组将使用数值键,从 0 开始并以 1 递增。
- */
- /**
- * array_filter() 函数用回调函数过滤数组中的值。
- * 该函数把输入数组中的每个键值传给回调函数。如果回调函数返回 true,
- * 则把输入数组中的当前键值返回结果数组中。数组键名保持不变。
- */
- //这里使用array_filter过滤掉数组中的空内容
- if(isset($uploadFiles)) {
- $uploadFiles=array_filter($uploadFiles);
- print_r($uploadFiles);
- }
- <?php
- /**
- */
- /**
- * 构建上传文件信息
- * @return mixed
- */
- function getFiles() {
- $i = 0;
- foreach($_FILES as $file) {
- //单文件或者多个单文件上传
- if(is_string($file['name'])) {
- $files[$i] = $file;
- $i++;
- } //多文件上传
- elseif(is_array($file['name'])) {
- foreach($file['name'] as $key=>$val) {
- $files[$i]['name'] = $file['name'][$key];
- $files[$i]['type'] = $file['type'][$key];
- $files[$i]['tmp_name'] = $file['tmp_name'][$key];
- $files[$i]['error'] = $file['error'][$key];
- $files[$i]['size'] = $file['size'][$key];
- $i++;
- }
- }
- }
- return $files;
- }
- /**
- * 获取文件扩展名
- */
- function getExt($filename) {
- return strtolower(pathinfo($filename,PATHINFO_EXTENSION));
- }
- /**
- * 获取唯一字符串
- */
- function getUniName() {
- return md5(uniqid(microtime(true), true));
- }
- /**
- * 针对于单文件、多个单文件、多文件的上传
- * @param array $fileInfo
- * @param string $path
- * @param bool $flag
- * @param int $maxSize
- * @param array $allowExt
- * @return array
- */
- function uploadFile($fileInfo, $path='./uploads',$flag=true,$maxSize=1048576,$allowExt = array('jpeg','jpg','gif','png')) {
- //$allowExt = array('jpeg','jpg','gif','png');
- //$flag = true;
- //$maxSize = 1048576; //1M
- $res = array();
- //判断错误号
- if($fileInfo['error'] == UPLOAD_ERR_OK) {
- //检测上传文件的大小
- if($fileInfo['size'] > $maxSize) {
- $res['mes'] = $fileInfo['name'] . '上传文件过大';
- }
- $ext = getExt($fileInfo['name']);
- //检测上传文件的文件类型
- if(!in_array($ext, $allowExt)) {
- $res['mes'] = $fileInfo['name'] . '非法文件类型';
- }
- //检测是否是真是的图片类型
- if($flag) {
- if(!getimagesize($fileInfo['tmp_name'])) {
- $res['mes'] = $fileInfo['name'] . '不是真实图片类型';
- }
- }
- //检测文件是否是通过HTTP POST上传上来的
- if(!is_uploaded_file($fileInfo['tmp_name'])) {
- $res['mes'] = $fileInfo['name'] . '文件不是通过HTTP POST方式上传上来的';
- }
- if($res) return $res;
- //$path = './uploads';
- if(!file_exists($path)) {
- mkdir($path, 0777, true);
- chmod($path, 0777);
- }
- $uniName = getUniName();
- $destination = $path . '/' . $uniName . '.' . $ext;
- if(!move_uploaded_file($fileInfo['tmp_name'],$destination)) {
- $res['mes'] = $fileInfo['name'] . '文件移动失败';
- }
- $res['mes'] = $fileInfo['name'] . '上传成功';
- $res['dest'] = $destination;
- return $res;
- } else {
- //匹配错误信息
- switch($fileInfo['error']) {
- case 1:
- $res['mes'] = '上传文件超过了PHP配置文件中upload_max_filesize选项的值';
- break;
- case 2:
- $res['mes'] = '超过了表单MAX_FILE_SIZE限制的大小';
- break;
- case 3:
- $res['mes'] = '文件部分被上传';
- break;
- case 4:
- $res['mes'] = '没有选择上传文件';
- break;
- case 6:
- $res['mes'] = '没有找到临时目录';
- break;
- case 7:
- case 8:
- $res['mes'] = '系统错误';
- break;
- }
- return $res;
- }
- }
php的web开发中关于上传文件的几种方法的总结
在php的web开发中,文件,图片,视频的上传是一个经常要用到的功能,而且涉及的知识面比较广,下面从几个不同的角度和技术层面来做一个详细的说明和总结。
注意:
在总结之前,请大家务必了解php.ini中的几个关于上传的关键配置值。
1.file_uploads
设为On,允许通过HTTP上传文件
2.upload_tmp_dir
文件上传至服务器时用于临时存储的目录,如果没指定,系统会使用默认的临时文件夹(我的机器是/tmp)。
3.upload_max_filesize
允许上传文件大小的最大值,默认为2M。
4.post_max_size
Php可接收的post数据的最大值(包括表单里的所有值的总合),默认为8M。
5.memory_limit
每个php所最占的最大内存数,这个值要大于允许上传的文件大小。
6.max_execution_time
每个php运行的最长时间(秒),默认30秒。
7.max_input_time
Php解析POST/GET数据的最长时间(秒),默认60秒。This sets the maximum time in seconds a scripts is allowed to parse input data, like POST and GET.It is measured from the mement of receiving all data on the server to the start of script execution.
其中很重要的是upload_max_filesize 和post_max_size 、memory_limit 必须要按照上传的文件设置合适,否则无法上传。
一、传统的php写的上传类。
写一个php的上传类,这个方法用到的知识全部是php的,而且技术的难点也不多。
<form method="post" action="upload.php" enctype="multipart/form-data">
<table border=0 cellspacing=0 cellpadding=0 align=center width="100%">
<input type="hidden" name="MAX_FILE_SIZE" value="2000000">//隐藏域。这里name必须设置成MAX_FILE_SIZE,其值就是上传文件的最大长度,单位是B,这里我限制成2M
<input name="file" type="file" value="浏览" >
< input type="submit" value="上传" name="B1">
</table>
</form>
服务端利用php的$_FILES['file']['name']来获取文件后缀名,具体的代码自己查找资料看看,这里就不多说了。
总结;这个方法可以用来上传小于2M的文件或者是图片,基本的功能可以实现。
二、利用uploadify插件
这个是利用Jquery的上传插件,上传可以带进度条,容易配置。
官网:http://www.uploadify.com/,可以下载资料和文档,里面的各个参数的详解都很清楚,而且还有php的demo,参考一下就可以很快的开发。
总结:可以上传一些大文件,和图片,而且带进度条,可以多文件上传,在WEB中会经常用。
三、利用百度的webupload
WebUploader 是由 Baidu FEX 团队开发的一款以 HTML5 为主,FLASH 为辅的现代文件上传组件。在现代的浏览器里面能充分发挥 HTML5 的优势,同时又不摒弃主流IE浏览器,沿用原来的 FLASH 运行时,兼容 IE6+,iOS 6+, android 4+。采用大文件分片并发上传,极大的提高了文件上传效率。
官网:http://fex.baidu.com/webuploader/ 同时网上也有很多的资料,不过开发起来会比较难一点,但是可以上传几个G的视频,还有上传图片可以预览,功能是非常强大的,只是开发的难度稍微大点。官网上也有demo,大家可以看看,试试。
四、swfupload的插件
这是一个jquery的上传插件,功能也非常强大,开发也比较容易,网上有很多的资料,大家可以自行查找。
总结:在web的开发中,本人建议可以使用uploadify和webupload这两个,真的很好用。
[php] 3个多文件上传(uploadify、file upload、 webuploader)
多文件上传的插件常用的有:
1、jquery uploadify 下载【http://www.uploadify.com/download/】
2、jquery file upload 下载【https://github.com/blueimp/jQuery-File-Upload/tags】
3、webuploader 下载【http://fex.baidu.com/webuploader/download.html】
注:
在使用的时候,要参照官网的文档说明,如果看不明白,可以百度一下想知道的,必境我这里只是入门的小实例
一、jquery uploadify
该插件已经把文件写好了(index.php和uploadify.php),下载后改下上传路径就行了,这里没什么要讲的
二、jquery file upload 以Thinkphp为例 Home模块下的Index控制器
布局文件index.html:
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>文件上传</title>
<link rel="stylesheet" href="__PUBLIC__/bootstrap/bootstrap.min.css"/>
<script src="__PUBLIC__/jquery.min.js"></script>
<link rel="stylesheet" href="__PUBLIC__/jqupload/css/jquery.fileupload.css">
<link rel="stylesheet" href="__PUBLIC__/jqupload/css/jquery.fileupload-ui.css">
<script src="__PUBLIC__/jqupload/js/vendor/jquery.ui.widget.js"></script>
<script src="__PUBLIC__/jqupload/js/jquery.fileupload.js"></script>
<script src="__PUBLIC__/jqupload/js/jquery.iframe-transport.js"></script>
</head>
<body>
<div class="container">
<div class="row fileupload-buttonbar" style="padding-left:15px;">
<div class="thumbnail col-sm-6">
<div class="progress progress-striped active" role="progressbar" aria-valuemin="10" aria-valuemax="100" aria-valuenow="0"><div id="weixin_progress" class="progress-bar progress-bar-success" style="width:0%;"></div></div>
<div class="caption" align="center">
<span id="weixin_upload" class="btn btn-primary fileinput-button">
<span>上传</span>
<input type="file" id="weixin_image" name="weixin_image[]" data-url="__CONTROLLER__/uploadImg" multiple>
</span>
</div>
</div>
</div>
</div>
<script>
$(function() {
$("#weixin_image").fileupload({
dataType: 'json',
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, // 文件上传类型
sequentialUploads: true, // 连续上传配置
add: function (e, data) {
//提交到服务器端
data.submit();
}
}).bind('fileuploadprogress', function (e, data) { // 绑定上传进度
var progress = parseInt(data.loaded / data.total * 100, 10);
$("#weixin_progress").css('width',progress + '%');
$("#weixin_progress").html(progress + '%');
}).bind('fileuploaddone', function (e, data) { // 上传完成处理
$("#weixin_upload").css({display:"none"});
$('.thumbnail').prepend('<img src="'+data.result+'" style="height:180px;margin-top:10px;margin-bottom:8px;" alt="图片" data-holder-rendered="true">');
});
});
</script>
</body>
</html>
Index控制器下的uploadImg方法
/* 文件上传处理 */
public function uploadImg(){
$upload = new \Think\Upload();// 实例化上传类
$upload->maxSize = 3145728 ;// 设置附件上传大小
//$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$upload->rootPath = './Public/Uploads/'; // 设置附件上传根目录
$upload->savePath = ''; // 设置附件上传(子)目录
$upload->autoSub = false; // 关闭子目录
// 上传文件
$info = $upload->upload();
if(!$info) {// 上传错误提示错误信息
$this->error($upload->getError());
}else{// 上传成功 获取上传文件信息
$pathArr = array();
foreach($info as $file){
array_push($pathArr, "Public/Uploads/".$file['savepath'].$file['savename']);
}
echo json_encode($pathArr);
}
}
三、webuploader (也是以Thinkphp为例) 可以多文件多图片大文件上传
HTML布局:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>webuploader</title>
<link rel="stylesheet" href="__PUBLIC__/webuploader/webuploader.css"/>
<script src="__PUBLIC__/jquery.min.js"></script>
<script src="__PUBLIC__/webuploader/webuploader.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
.progress {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 15px;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 15px;
}
.uploader-list .file-item {
position: relative;
}
.progress span {
display: inline-block;
height: 100%;
background: #1C9F09;
}
</style>
</head>
<body>
<div id="uploader-demo">
<!--用来存放item-->
<div id="fileList" class="uploader-list"></div>
<div id="filePicker">选择图片</div>
</div>
</body>
</html>
JS脚本:
<script>
// 图片上传demo
jQuery(function() {
var $ = jQuery,
$list = $('#fileList'),
// 优化retina, 在retina下这个值是2
ratio = window.devicePixelRatio || 1,
// 缩略图大小
thumbnailWidth = 100 * ratio,
thumbnailHeight = 100 * ratio,
// Web Uploader实例
uploader;
// 初始化Web Uploader
uploader = WebUploader.create({
// 自动上传。
auto: true,
// swf文件路径
swf: '__PUBLIC__/webuploader/Uploader.swf',
// 文件接收服务端。
server: '__CONTROLLER__/webuploader',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: '#filePicker',
// 只允许选择文件,可选。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) {
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail">' +
'<img>' +
'<div class="info">' + file.name + '</div>' +
'</div>'
),
$img = $li.find('img');
$list.append( $li );
// 创建缩略图
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr( 'src', src );
}, thumbnailWidth, thumbnailHeight );
});
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress span');
// 避免重复创建
if ( !$percent.length ) {
$percent = $('<p class="progress"><span></span></p>')
.appendTo( $li )
.find('span');
}
$percent.css( 'width', percentage * 100 + '%').text(percentage * 100+'%');
});
// 文件上传成功,给item添加成功class, 用样式标记上传成功。
uploader.on( 'uploadSuccess', function( file ) {
console.log(file);
$( '#'+file.id ).addClass('upload-state-done');
});
// 文件上传失败,现实上传出错。
uploader.on( 'uploadError', function( file ) {
var $li = $( '#'+file.id ),
$error = $li.find('div.error');
// 避免重复创建
if ( !$error.length ) {
$error = $('<div class="error"></div>').appendTo( $li );
}
$error.text('上传失败');
});
// 完成上传完了,成功或者失败,先删除进度条。
uploader.on( 'uploadComplete', function( file ) {
// $( '#'+file.id ).find('.progress').remove();
});
});
</script>
PHP代码:
public function webuploader() {
$upload = new \Think\Upload();// 实例化上传类
$upload->maxSize = 3145728 ;// 设置附件上传大小
$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$upload->rootPath = './Public/Uploads/'; // 设置附件上传根目录
$upload->savePath = ''; // 设置附件上传(子)目录
$upload->autoSub = false; // 关闭子目录
// 上传文件
$info = $upload->upload();
if(!$info) {// 上传错误提示错误信息
$this->error($upload->getError());
}else{// 上传成功 获取上传文件信息
$pathArr = array();
foreach($info as $file){
array_push($pathArr, "Public/Uploads/".$file['savepath'].$file['savename']);
}
echo json_encode($pathArr);
}
}
原文链接:点击打开链接
PHP百度diyUpload多图上传插件实例
在开发过程中经常需要用到多图上传的插件,最近发现前端找的这个diyUpload就不错,于是就整理了一个实例,仅供参考!
使用该插件,首先需要引入必要的css和js:
然后在需要用到该插件的地方,加入一个div:
<div id=”box”>
<div id=”test”></div> <!–上传控件按钮–>
</div>
接着把调用的js写上:
<script type=”text/javascript”>
/*
* 服务器地址,成功返回,失败返回参数格式依照jquery.ajax习惯;
* 其他参数同WebUploader
*/
$(‘#test’).diyUpload({
url : ‘fileupload.php’, //这个是文件上传处理文件 用框架的请对应文件上传的控制器
//formData: { _token: “{{csrf_token()}}”}, //Laravel 框架下需要 csrf_token 才能上传,可以在 formData 里面添加需要带过去的参数
dataType:”json”,
success : function(data) {
console.info(data);
if(data.status == 1){
var span =$(“<input type=’hidden’ value='”+data.imagepath+”‘ name=’img[]’>”);//将上传后保存的路径返回 通过隐藏域放进表单里面
$(“#test”).append(span);
}
},
error : function(err) {
console.info(err);
}
});
</script>
就这三步就可以上传图片了,最后就是服务端的文件上传处理了。fileupload.php 就是图片上传的处理文件,根据自己的业务逻辑把临时文件夹的图片保存到自己的网站目录。
(注:这个多图上传的服务端处理文件是每个图片上传后都会被调用一次的。)