无刷新上传图片，ajax 和 iframe

2025-01-13 技术教程

iframe 上传

upload.html

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script></head><body><iframeid="upload_target"name="upload_target"src="upload.php"></iframe><imgid="tag_img"src="https://cache.yisu.com/upload/information/20200310/52/107580.jpg"/><formenctype="multipart/form-data"action="upload.php"method="post"target="upload_target"><inputtype="file"id="fileipt"name="userfile"class="file"value=""/><inputtype="submit"name="uploadimg"value="上传"id="submit"hidden/></form><scripttype='text/javascript'>varlastFileName;$("#fileipt").change(function(){varfileName=$(this).val();varpos=fileName.lastIndexOf("\\");fileName=fileName.substr(pos+1,fileName.length);//截取出文件名因为会带路径lastFileName=fileName;$("#submit").click();});functionstopSend($url){$("#tag_img").attr("src",$url);}</script></body></html>

upload.php

<?php/***CreatedbyPhpStorm.*User:chenxiaolong*Date:7/21/17*Time:10:24*///var_dump($_FILES);$file=$_FILES['userfile'];if($file['size']!=0){$name=rand(0,500000).dechex(rand(0,10000)).".jpg";move_uploaded_file($file['tmp_name'],$name);if($name){echo"<script>parent.stopSend('$name')</script>";}}

ajax 无刷新上传图片

<buttonid="J_headimg">修改头像</button><inputtype="file"name="pic"id="pic"hiddenaccept="p_w_picpath/*"/><inputtype="text"id="headimg"name="headimg"hidden><script>$("#J_headimg").click(function(){$("#pic").click();returnfalse;});$("#pic").change(function(){var$that=$(this);varimgPath=$(this).val();if(imgPath==""){alert("请选择上传图片！");return;}//判断上传文件的后缀名varstrExtension=imgPath.substr(imgPath.lastIndexOf('.')+1);if(strExtension!='jpg'&&strExtension!='gif'&&strExtension!='png'&&strExtension!='bmp'&&strExtension!='jpeg'){alert("请选择图片文件");return;}varformData=newFormData();formData.append('file',$that[0].files[0]);//php用$_FILES['file']接收console.log($that[0].files[0]);$.ajax({type:"POST",url:"__URL__/uploadimg",data:formData,cache:false,processData:false,//需要加这两个参数contentType:false,success:function(data){varobj=JSON.parse(data);if(obj.status==0){$("#preimg").attr("src","Public/Upload/"+obj.data);$("#headimg").val(obj.data);}else{alert(obj.data);}},error:function(XMLHttpRequest,textStatus,errorThrown){alert("上传失败，请检查网络后重试");}});});</script>

对应uploadimg方法

publicfunctionuploadimg(){$file=$_FILES['file'];$arr=array('jpg'=>'p_w_picpath/jpeg','png'=>'p_w_picpath/png','gif'=>'p_w_picpath/gif','bmp'=>'p_w_picpath/bmp');if($ext=array_search($file['type'],$arr)){$rand=uniqid();$filename="Public/Upload/avatar/{$rand}.{$ext}";}else{exit(json_encode(array('status'=>2,'data'=>'只支持图片上传')));}$r=move_uploaded_file($file['tmp_name'],$filename);if($r){exit(json_encode(array('status'=>0,'data'=>"avatar/$rand.$ext")));}else{exit(json_encode(array('status'=>1,'data'=>'上传失败')));}}