文件上传,点击按钮并选择文件后,文件会临时存到一个位置,会有一个临时名字;
然后在php文件中处理,给文件起名并将文件从临时为止搬到服务器,把需要的文件信息返回给前端页面;
最后表单提交时,把文件信息提交给后台,后台将文件信息存到数据库(比如文件名字,路径等);
在展示页面或编辑页面,将文件信息从数据库取出来,就可以直接渲染在页面上了。
整个过程明白了,接下来看看代码是怎么实现的!
一、先渲染表单页面,包括图片上传,代码如下:
<div class="main">
<form action="index.php" method='POST' id="form1">
<p><i id="photoup"></i><span>图片上传(多图上传)</span></p>
<div class="form_item">
<input id="value" type="hidden" name='pics' value="">
<div id="demo">
<div id="as" ></div>
</div>
</div>
<input type='submit' class='button' name='dosubmit' value="提交"/>
</form>
</div>
当然需要css和js,这里上传不了文件,可以去网上下载适用的图片上传插件。
二、点击按钮可以在本地选择图片。
上面代码中id=demo的div就是图片上传的按钮,给这个按钮加js事件,url为将图片上传到服务器的php文件。代码如下:
$('#demo').on('click', '.diySuccess', function() {
var url_cache = $(this).parent().find('.viewThumb img').attr('data-url'),
arr_cache = JSON.parse($('#value').val()),
new_arr = [];
for (var i=0; i<arr_cache.length; i++) {
if (url_cache !== arr_cache[i].url) {
new_arr.push(arr_cache[i]);
}
}
$(this).parents('li').remove();
$("#value").val(JSON.stringify(new_arr));
arr = new_arr;
})
var arr=[];
$('#as').diyUpload({
url:'Source/php/uploadify.php',
success:function( data ) {
var data_cache={};
data_cache.name=data.name;
data_cache.url=data.url;
arr.push(data_cache);
$("#value").val(JSON.stringify(arr));
},
error:function( err ) {
console.info( err );
},
buttonText : '选择文件',
chunked:true,
// 分片大小
chunkSize:512 * 1024,
//最大上传的文件数量, 总文件大小,单个文件大小(单位字节);
fileNumLimit:50,
fileSizeLimit:500000 * 1024,
fileSingleSizeLimit:50000 * 1024,
accept: {}
});
三、将前端传到后台的图片搬到服务器,也就是上面url地址,Source/php/uploadify.php。代码如下:
<?php
date_default_timezone_set( 'Asia/Shanghai' );
$targetFolder = '/upload/';
if (!empty($_FILES)) {
$file_name = iconv("UTF-8","gb2312", $_FILES['file']['name']); //文件名称
$filenames= explode(".",$file_name);
$tempFile = $_FILES['file']['tmp_name'];
$rand = rand(1000, 9999);
$targetPath = $_SERVER['DOCUMENT_ROOT'] . '/' .ltrim($targetFolder,'/'); //图片存放目录
$targetFile = rtrim($targetPath,'/') . '/' .time().$rand.".".$filenames[count($filenames)-1]; //图片完整路徑
// Validate the file type
$fileTypes = array('jpg', 'jpeg', 'png'); // File extensions
$fileParts = pathinfo($_FILES['file']['name']);
if (in_array($fileParts['extension'],$fileTypes)) {
move_uploaded_file($tempFile,iconv("UTF-8","gb2312", $targetFile));
exit(json_encode(array("url"=>$targetFile,'name'=>$file_name)));
} else {
echo 'Invalid file type.';
}
}
代码中move_uploaded_file()函数就是将临时文件放到服务器。最后返回图片信息,上面代码返回图片name和url。
然后第二步js中将这些信息,放到第一步页面的input的value中,提交表单时,将value提交到后台。
四、点击提交表单,后台php接收到表单数据后,存到数据库。
第一步页面表单提交路径为index.php,代码如下:
<?php
$images = $_POST['pics']; //將接收到的數據直接存到數據庫,編輯時放到編輯頁面
$pics = json_decode($images);
foreach ($pics as $k => $va) {
$pic_arr[$k]['name'] = $va ->name;
$pic_arr[$k]['url'] = $va ->url;
}
$pics = serialize($pic_arr); //將數組序列化存到數據庫
$data['images'] = $images;
$data['pics'] = $pics;
$db ->add($data);
五、编辑页面,将图片渲染到页面上,并可以编辑图片。代码如下:
<div class="form_item">
<input id="value" type="hidden" name='pics' value='{$info.images}'>
<div id="demo">
<div id="as" ></div>
<if condition="$info[images] neq '' ">
<div class="parentFileBox">
<ul class="fileBoxUl">
<volist name='pics' id='vo'>
<li id="fileBox_WU_FILE_{$i}" class="">
<div class="viewThumb">
<img src="{$vo[url]}" data-url="{$vo[url]}">
</div>
<div class="diyCancel"></div>
<div class="diySuccess" style="display: block;"></div>
<div class="diyFileName">{$vo['name']}</div>
<div class="diyBar" style="display: none;">
<div class="diyProgress" style="width: 100%;"></div>
<div class="diyProgressText">上传完成</div>
</div>
</li>
</volist>
</ul>
</div>
</if>
</div>
</div>
这样,完整的图片上传就完成了。包括前端与后台交互。