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

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

然后在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=" 100%;"></div>
                                        <div class="diyProgressText">上传完成</div>
                                    </div>
                                </li>
                            </volist>
                        </ul>
                    </div>
                    </if>
                    </div>
                </div>

这样，完整的图片上传就完成了。包括前端与后台交互。