不刷新实现图片上传功能

最新推荐文章于 2021-10-13 12:12:13 发布

启舰

最新推荐文章于 2021-10-13 12:12:13 发布

阅读量5.5k

点赞数

分类专栏： --------------4.3.2 JQuery --------------4.1.1 PHP --------------4.3.1 JS

本文链接：https://blog.csdn.net/harvic880925/article/details/8642122

版权

--------------4.1.1 PHP 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

--------------4.3.2 JQuery

9 篇文章 1 订阅

订阅专栏

--------------4.3.1 JS

9 篇文章 1 订阅

订阅专栏

前言：这两天要写一个上传图片的功能，但原书中是将表单提交给一个PHP处理页面去处理，而且跳转到这个页面，我不想要跳转，而且也不想刷新，经过查找资料，用iframe框架来实现不跳转处理功能，即利用form的target属性，把数据提交到页面中一个（通常为隐藏的）iframe上。直观点说就是把“刷新”留给iframe。而不刷新，则即是利用JS代码实现提交完成后的一些工作。

代码如下：

其中HTML代码如下：

这里关键就是把form的target设为iframe的name

<body>
<script type="text/javascript">
    function startUpload() {
         document.getElementById('processing').innerHTML = 'loding...';
        return true;
    }
     
    function stopUpload(rel){
        var msg;
        switch (rel) {
            case 0:
                msg = "上传成功";
                break;
	   case 1:
		msg = "请选择要上传的文件";
		break;
            case 2:
                msg = "只能上传图片文件";
                break;
            default:
                msg = "上传文件失败";
				break;
        }
        document.getElementById('processing').innerHTML = msg;
	
	//清空上传控件中的路径名
	var ie = (navigator.appVersion.indexOf("MSIE")!=-1);//IE 
   	if(ie){
    		var file2= tempNode.cloneNode(false);
        		file2.οnchange= tempNode.onchange;
        		tempNode.parentNode.replaceChild(file2,tempNode);

   	 }else{
   		 $("input[name=upfile]").val("");
  	 } 		
    }
    </script>
<div id="upLoad">
	<div id="processing" style="font-size:10px;"></div>
	<form action="post2.php" method="post" enctype="multipart/form-data" target="form-target" οnsubmit="startUpload();">
	<tr>
		<td><span>上传到图库</span></td>
		<td><input type='file' name='upfile' id='file' style='margin-left:10px'/></td>
		<td><input type="submit" value="上传" style="margin-left:25px;padding-left:5px;padding-right:5px;"/></td>
	</tr>
	</form>
	<iframe style="width:0; height:0; border:0;" name="form-target"></iframe>
</div>
</body>

简单讲解：

上传控件路径清除：

这里要注意一下，我上传的源码里少写了一句代码，即IE与FF清空上传控件内容的代码要区别对待，先判定是不是IE，如果是IE就使用IE的方法来去掉，否则用JQUERY的方法。这里，我还要多说一句，网上有很多清空IE中上传控件内容的方法，但经过我逐个的实践，上面的实现代码是我最终找到的最佳的没有BUG 的实现方法，其它方法，比如：

refreshUploader($("input[name=file]")[0]);//根本没用

另外另一个必须说的方法：

var tempNode=document.getElementById("file");
tempNode.select();
document.execCommand("delete");

我原来也是用这个来实现的，但这个在IE上是有问题的，第一次上传的时候成功，但在第二次点击上传按钮的时候，在根本没有上传时就把上传框中的地址给删除了，而且根本就没有上传，在第三次点击的时候又正常，所以说，在连续操作两次时，第二次是无效的，而且出现的这个问题很难找得到，我也是一个个的排除，白白地浪费了我一个小时，但在网上竟然还有人奉之为最常用的方法，天呐！望周知；

PHP处理页面

POST2.PHP

<?php
sleep(2);
 
//判断是否有文件上传
if(!@$_POST["upfile"]&&$_FILES["upfile"]["name"]==""){
	$result=1;
}
//如果有文件上传
else{
	//定义文件上传路径为当前目录的temp目录
	$filePath="temp/";
	if (!file_exists($filePath)){//如果指定文件夹不存在，则创建文件夹
	            mkdir($filePath , 0777);
	     }
	//重新定义文件路径及文件名
	//分离文件路径，分离结果为：pathinfo() 返回一个关联数组包含有 path 的信息。包括以下的数组单元：dirname，basename 和 extension。
	$houzhui = pathinfo($_FILES['upfile']['name']);
	//判断格式是否是图片格式
	if ( !in_array($houzhui['extension'],array('jpg','gif','png','JPG','GIF','PNG')) ) {
		$result=2;
	}else{
		$name=$filePath."newName".'.'.$houzhui['extension'];
		//移动上传的临时文件，为新的文件
		//如果移动成功，输出相应内容
		if(move_uploaded_file($_FILES['upfile']['tmp_name'],$name))
		{
			$result=0;
		}
		//如果移动失败
		else{
			$result=-1;
		}
	}
	//这里的newName是要根据数据库产生的图片新名字
	
}
?>
<script type="text/javascript">
    window.top.window.stopUpload(<?php echo $result; ?>);
</script>

这里我将把上述源码传到资源中，供大家分享；

源码地址：http://download.csdn.net/detail/harvic880925/5114248

参考文章：http://www.oschina.net/code/snippet_106025_6161

启舰

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
不刷新实现图片上传功能

前言：这两天要写一个上传图片的功能，但原书中是将表单提交给一个PHP处理页面去处理，而且跳转到这个页面，我不想要跳转，而且也不想刷新，经过查找资料，用iframe框架来实现不跳转处理功能，即利用form的target属性，把数据提交到页面中一个（通常为隐藏的）iframe上。直观点说就是把“刷新”留给iframe。而不刷新，则即是利用JS代码实现提交完成后的一些工作。代码如下：其中HTML
复制链接

扫一扫

专栏目录