使用ajax，結合jquery,php實現圖片上傳預覽功能

大體邏輯：點擊頁面的file，上傳圖片到指定的php處理圖片的文件，處理完成之後，將圖片的鏈接地址返回，JS控制返回的數據，而後將圖片動態的展現出來
html代碼
<label>
    <img class="fileimg" height="200px;" src=""/>
    <input type="file" style="display: none;" id="file" class="files" />
    <input type="hidden" name="pic" id="nowPic" value="{$data_view.pic}">
</label>

js代碼

$(document).ready(function() {
    var url = "fileupload.php";　　　　//這裏是你須要那個文件來處理圖片
    $("#file").change(function() {
        //普通上傳
        var upload = function(f) {
            var xhr = new XMLHttpRequest();
            xhr.open('POST', url, true);
            var formData;
            formData = new FormData();
            formData.append('file', f);
            xhr.onreadystatechange = function(response) {
                if (xhr.readyState == 4 && xhr.status == 200 && xhr.responseText != "") {
                    $(".fileimg").attr("src","{:C('PUBLIC')}/"+(xhr.responseText));
                    $("#file").remove();
                    $("#nowPic").val(xhr.responseText);
                } else if (xhr.status != 200 && xhr.responseText) {
                }
            };
            xhr.send(formData);
        };
        if ($("#file")[0].files.length > 0) {
            upload($("#file")[0].files[0]);
        } else {
            console && console.log("form input error");
        }
    })
});

php代碼  使用的是thinkphp3.2.3來處理的

public function index($type='upload'){    $upload = new \Think\Upload();// 實例化上傳類    $upload->rootPath = './Public/Uploads/'.$type.'/'; // 設置附件上傳根目錄    $upload->autoSub  = false;    $info = $upload->upload();    if (!$info){        $this->error($upload->getError());    }else{        //echo json_encode('/Uploads/'.$type.'/'.$info['savepath'].$info['savepath']);        echo '/Uploads/'.$type.'/'.$info["file"]['savepath'].$info["file"]['savename'];    }}