通过iframe上传即预览

最新推荐文章于 2024-08-16 11:21:40 发布

ddlLin

最新推荐文章于 2024-08-16 11:21:40 发布

阅读量737

点赞数

文章标签：图片界面

本文链接：https://blog.csdn.net/qq_30057893/article/details/47303403

版权

一个图片上传之后是不可以直接预览的，通常是需要刷新界面一下。

这个问题可以通过iframe窗口刷新来解决，不过也可以使用其他插件来解决。

<body>
	<iframe name="upload_targer" id="upload_targer" style="width:1000px;height: 1000px;overflow: hidden;border: 0; "></iframe>
	<img src="" id="tag_img">
	<form action="e.php" method="post" accept-charset="utf-8" enctype="multipart/form-data" target="upload_targer">
		<input type="file" name="userfile" class="userfile" value="">
		<input type="submit" name="uploadimg"  value="submit" id="img_submit">
	</form>
</body>

这是一个简单的上传的前端，也可以把iframe中的css样式设置为不可见的。

这样在上传图片时iframe窗口中的刷新便无法看见也就实现了上传即预览。

上传之后我们需要通过后台文件来处理在输出你所上传图片的路径，

<?php
$array = array(
<span style="white-space:pre">	</span>'data'=>array(
<span style="white-space:pre">		</span>'img'=>'',
<span style="white-space:pre">		</span>'url'=>''
<span style="white-space:pre">		</span>),
<span style="white-space:pre">	</span>'message'=>'',
<span style="white-space:pre">	</span>'code'=>0
);
if ($_FILES['userfile']['error']>0){
<span style="white-space:pre">	</span>$array['message'] = "!problem";
<span style="white-space:pre">	</span>switch ($_FILES['userfile']['error']) {
<span style="white-space:pre">		</span>case 1:
<span style="white-space:pre">			</span>echo '文件大小超出服务器限制';
<span style="white-space:pre">			</span>break;
<span style="white-space:pre">		</span>case 2:
<span style="white-space:pre">			</span>echo '文件太大';
<span style="white-space:pre">			</span>break;
<span style="white-space:pre">		</span>case 3:
<span style="white-space:pre">			</span>echo '文件只加载了一部分';
<span style="white-space:pre">			</span>break;
<span style="white-space:pre">		</span>case 4:
<span style="white-space:pre">			</span>echo '文件加载失败';
<span style="white-space:pre">			</span>break;
<span style="white-space:pre">	</span>}
exit;
}


if($_FILES['userfile']['size']>1000000){
<span style="white-space:pre">	</span>echo "文件过大";
<span style="white-space:pre">	</span>exit;
}




if($_FILES['userfile']['type'] != 'image/jpeg'){
<span style="white-space:pre">	</span>echo "上传的文件不是jpeg格式";
<span style="white-space:pre">	</span>exit;
}


$type = '.jpg';
$upfile = $_SERVER['DOCUMENT_ROOT'];
if (is_uploaded_file($_FILES['userfile']['tmp_name'])){
<span style="white-space:pre">	</span>if(!rename($_FILES['userfile']['tmp_name'], $upfile .'/'. $_FILES['userfile']['name']))
<span style="white-space:pre">		</span>echo "文件保存失败";
}


else {
<span style="white-space:pre">	</span>echo "problem";
<span style="white-space:pre">	</span>exit;
}
//$upimgurl = '.' . $upfile. '/' .$_FILES['userfile']['name'];
$array['data']['url'] = $upimgurl;


echo "success";
$array['code'] = 0;
if($array['code'] == 0)
$array['data']['img'] = $upimgurl;
$upurl = $_FILES['userfile']['name'];
echo "<input type='text' value='$upurl' id='upimgurl'>" ;

这是后台的处理文件，主要作用是输出你所上传图片的url，不过这里我也有一个问题，如果设置为相对路径它会显示找不到相对路径。

将文件输出后，我们就要通过js来获得iframe当中text标签的val。

	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$('#img_submit').click(function() {
				$($("#upload_targer")).on('load', function(event){
				event.preventDefault();
				var iframe = this.contentWindow;
					$('#tag_img').attr("src",$(iframe.document.getElementById('upimgurl')).val());
			})
		});
		})
	</script>

这是通过js获得text标签的val值的代码，

这样就可以实现上传即预览了。