thinkphp+jquery+iframe异步上传

最新推荐文章于 2022-06-15 09:35:51 发布

A1031232

最新推荐文章于 2022-06-15 09:35:51 发布

阅读量788

点赞数

分类专栏： thinkphp 文章标签：异步上传 thinkphp php ajax上传 iframe异步上传

本文链接：https://blog.csdn.net/A1031232/article/details/31743113

版权

thinkphp 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近在做的项目要用到图片异步上传，由于ajax不能实现异步上传，所以只能用iframe，附上部分关键代码！

html页面代码

    <form method="post" action="__SELF__">
	    	<input type="hidden" id="logo" size="40" name="Info[logo]" />
	        <table cellspacing="1" cellpadding="3" width="100%">
	        	 <tr>
	                <td class="label">Logo</td>
	                <td>
	                	<img id="pre_img" />
	                    <input id="selImg" type="button" value="选择图片" />
	                </td>
	            </tr>

隐藏的iframe和点击弹出窗

<iframe style="display:none;" name="ifr"></iframe>
<div id="upload" style="position:absolute;display:none;padding:10px;border:1px solid #CCC;background:#FFF;width:360px;">
<form id="pre_form" target="ifr" method="POST" action="__CONTROLLER__/ajaxUpload" enctype="multipart/form-data">
	图片：<input type="file" name="img" /><input type="submit" value="上传" />
	<a id="close" href="javascript:void(0);"> [关闭] </a>
</form>
</div>

js处理代码

<script>
$("#close").click(function(){
	$("#upload").hide();
});
$("#selImg").click(function(){
	// 获取按钮的位置
	var p = $(this).position();
	var div = $("#upload");
	div.css({
		"left":p.left+"px",
		"top":p.top+"px",
		"display":""
	});
});

提交到后台的php文件ajaxUpload，做你自己的上传或缩略图片操作

	public function ajaxUpload(){
		// 读取上传图片的配置
		$config = C('UPLOAD_CONFIG');
		// 设置上传路径
		$config['savePath'] = 'Goods/Temp/';
		$upload = new \Think\Upload($config);
		// 执行上传
		$info = $upload->upload();
		if(!$info)
			die($upload->getError());
		// 设置模型原图地址
		$url = 'Uploads/'.$info['img']['savepath'] . $info['img']['savename'];
		$thumb_url = 'Uploads/'.$info['img']['savepath'] . 'sm_' .$info['img']['savename'];
		$image = new \Think\Image(); 
		$image->open($url);
		$image->thumb(100, 100)->save($thumb_url);
		// 在子窗口中的执行JS把数据放到父窗口的表单中
		$index = __ROOT__;
		$js = '<script>';
		$js .=<<<JS
		parent.document.getElementById("logo").value='$url';
		parent.document.getElementById("pre_img").src='$index/$thumb_url';
		parent.document.getElementById("upload").style.display="none";
		parent.document.getElementById("pre_form").reset();
		
JS;
		$js .= '</script>';
		echo $js;
	}