function zll_up(click_id,up_url,text_id,show_id){
    this.create = function(){}
    //當點擊指定元素時,創建iframe form input(file)等元素
    $("#"+click_id).click(function(){
        console.log(‘click‘);
        $("body").append("<form action=‘"+up_url+"‘ method=‘post‘ enctype=‘multipart/form-data‘ target=‘iframe_"+click_id+"‘ style=‘display:none;‘ name=‘form_"+click_id+"‘ id=‘form_"+click_id+"‘><input type=‘file‘ name=‘tupian_"+click_id+"‘ id=‘tupian_"+click_id+"‘></form>");
        $(
 
"body").append("<iframe style=‘display:none;‘ name=‘iframe_"+click_id+"‘ id=‘iframe_"+click_id+"‘></iframe>");
        
        $(‘#tupian_‘+click_id).change(function(){
            console.log(‘change‘);
            var file = document.getElementById("tupian_"+click_id).files[0];
            
 
var reader = new FileReader(); 
            reader.readAsDataURL(file); 
             reader.onload = function(evt){ 
             $("#"+show_id).html(‘<img style="width:100%;height:100%;" src="‘ + evt.target.result + ‘" />‘);
            } 
            $("#form_"+click_id).submit();
        });
        
        $(
 
"#iframe_"+click_id).on("load",function(){
            console.log(‘load‘);
            var data = $(window.frames[‘iframe_‘+click_id].document.body).find("textarea").html();
            console.log(data);
            $("#"+text_id).val(data);
            //當上傳完成時刪除之前創建的元素
            console.log(‘remove‘);
            $("#iframe_"+click_id).remove();
            $("#form_"+click_id).remove();
        });
        
        $("#tupian_"+click_id).click();
    });
}

js代碼

<div class="control-group">
                        <label class="control-label item-label" >上傳圖片 (750*1525)<span class="check-tips"></span></label>
                        <div class="controls uploadrow2" data-max="1" title="點擊修改圖片" rel="cover" id="upclick">
                            <input type="hidden" name="img" id="img" value="{$art.img}">
                            <div class="upload-img-box" rel="img" id="imgshow" style="height:auto;">
                                <if condition="!empty($art[‘img‘])">
                                    <img src="__UPLOADS__/{$art.img}"/>
                                </if>
                            </div>
                        </div>
                    </div>
<script type="text/javascript" src="引入上面的js代碼"></script>
<script type="text/javascript">
       zll_up("upclick","{:U("$con_name/z_upload")}","img","imgshow");
</script>

html代碼

function z_upload(){
        //單文件上傳
        //公用上傳函數 zll 2017-6-7 11:35:44
        //用於iframe的無刷新上傳
        $config = array(
                ‘maxSize‘    =>    3145728,
                ‘rootPath‘   =>    ‘./Uploads/‘,
                ‘savePath‘   =>    ‘‘,
                ‘saveName‘   =>    array(‘uniqid‘,‘‘),
                ‘exts‘       =>    array(‘jpg‘, ‘gif‘, ‘png‘, ‘jpeg‘),
                ‘autoSub‘    =>    true,
                ‘subName‘    =>    array(‘date‘,‘Ymd‘),
            );
            $upload = new \Think\Upload($config);// 實例化上傳類
            $info = $upload->upload();
            if(!$info) {
                // 上傳錯誤提示錯誤信息
                //    echo $upload->getError();
                echo "<textarea>error</textarea>";
            }else{// 上傳成功
                echo "<textarea>".$info[array_keys($info)[0]][‘savepath‘].$info[array_keys($info)[0]][‘savename‘]."</textarea>";
            }
    }

PHP代碼(thinkphp3.2.3)

jquery 無刷新上傳的小function