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="width: 100%;"></div>
                                        <div class="diyProgressText">上傳完成</div>
                                    </div>
                                </li>
                            </volist>
                        </ul>
                    </div>
                    </if>
                    </div>
                </div>

這樣，完整的圖片上傳就完成了。包括前端與后台交互。