首页 > 代码库 > 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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。