PHP+js实现图片上传，编辑

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

文件上传，点击按钮并选择文件后，文件会临时存到一个位置，会有一个临时名字；

然后在php文件中处理，给文件起名并将文件从临时为止搬到服务器，把需要的文件信息返回给前端页面；

最后表单提交时，把文件信息提交给后台，后台将文件信息存到数据库（比如文件名字，路径等）；

在展示页面或编辑页面，将文件信息从数据库取出来，就可以直接渲染在页面上了。

整个过程明白了，接下来看看代码是怎么实现的！

一、先渲染表单页面，包括图片上传，代码如下：

当然需要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);

五、编辑页面，将图片渲染到页面上，并可以编辑图片。代码如下：