首页 > 代码库 > jquery 无刷新上传的小function

jquery 无刷新上传的小function

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="http://www.mamicode.com/‘ + evt.target.result + ‘" />‘);            }             $("#form_"+click_id).submit();        });                $("#iframe_"+click_id).on("load",function(){            console.log(‘load‘);            var data = http://www.mamicode.com/$(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="http://www.mamicode.com/引入上面的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