文章目录

php+ajax无刷新上传图片

在实际应用中,我们经常上传图片是点击submit上传。

导致页面刷新,如果再次刷新页面还会进行重复操作。

所以今天三体教程带来的是使用php+ajax实现无刷新上传图片的功能。

php+ajax无刷新上传图片php+ajax无刷新上传图片

上传页面代码

php代码if ($pic){
				echo '
				<div class="fileimage ctrlbox_backup" data-file="fileimage"><img src="'.$pic.'" data-src="'.$pic.'" id="mainpic"><i class="del delfileimage"></i><span class="delfileimage">删除</span><u></u></div>
				';
			}else{
				echo '
				<div class="ctrlbox fileimage" data-file="fileimage">
					<i class="icon-file-image"></i>添加图片
				</div>
				';
			}
			echo '
            <div>
				<input type="file" name="fileimage[]" id="fileimage" class="image none" />
				<input type="hidden" name="pic" id="pic" value="'.$pic.'" />
                <iframe id="exec_target" name="exec_target"></iframe>
            </div>
			';
javascript代码//选择文件成功则提交表单开始
$("#fileimage").change(function(){
	if($("#fileimage").val() != ''){
		$("#form1").attr("action","ajax.php?act=uploadimage");
		$("#form1").attr("target","exec_target");
		$("#form1").submit();
	}
});
//iframe加载响应,初始页面时也有一次,此时data为null。
$("#exec_target").load(function(){
	var data = $(window.frames['exec_target'].document.body).find("textarea").html();
	//若iframe携带返回数据,则显示在feedback中
	if(data != null){
		$(".fileimage").html(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>')+'<i class="del delfileimage"></i><span class="delfileimage">删除</span><u></u>');
		$("#fileimage").val('');
		$(".fileimage").removeClass("ctrlbox");
		$(".fileimage").addClass("ctrlbox_backup");
		$("#pic").val($(".delfileimage").parent().find("img").attr("data-src"));
		
		$("#form1").removeAttr("action");
		$("#form1").removeAttr("target");
	}
});
$(document).on("click",".ctrlbox",function(){
	var datafile=$(this).attr("data-file");
	$("#"+datafile).click();
});
//选择文件成功则提交表单结束

//删除图片事件
$(document).on("click",".delfileimage",function(){
	var img=$(this).parent().find("img").attr("data-src");		
	var id = $('#fid').val();
	var url='ajax.php?act=delfileimage&img='+img+(id?'&id='+id:'');
	$.ajax({
		url: url,
		type: 'get'
	});		
	$(this).parent().html('<i class="icon-file-image"></i>添加图片');
	$(".fileimage").removeClass("ctrlbox_backup");
	$(".fileimage").addClass("ctrlbox");
	$("#pic").val('');
	$("#form1").removeAttr("action");
	$("#form1").removeAttr("target");
});

ajax.php文件

php代码$act=Reqs("act");
switch($act){
	case "delfileimage":{
		$img=Reqs("img");
		if (file_exists($img) && $img) unlink($img);
	}break;
	case "uploadimage":{
		$pic=fileupload('fileimage','path','image');//此处为上传图片代码,用自己写的
		echo '<textarea><img src="'.$pic.'" data-src="'.$pic.'" /></textarea>';
	}break;
}
echo json_encode($data);

用到的素材文件ui.png

png图片

上面的代码中有一个隐藏的pic文本框,用于接收上传后的图片,用于最后保存时存入数据库。

以上就是完整的php+ajax无刷新上传完整代码了,如果有什么不明白的可以在下面留言。

本文网址:http://www.santii.com/article/217.html

数据更新时间:2019-09-18