无刷新上传图片，ajax 和 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"style="width:0;heigth:0;overflow:hidden;border:0;position:absolute;left:-500px;"></iframe>
<imgid="tag_img"src="http://avatar.csdn.net/C/2/1/1_shenlingsuifeng.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"style="font-size:12px;margin-left:10px;width:70px;height:30px;background:#10AD5A;color:#fff;">修改头像</button>
<inputtype="file"name="pic"id="pic"hiddenaccept="image/*"/>
<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'=>'image/jpeg','png'=>'image/png','gif'=>'image/gif','bmp'=>'image/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'=>'上传失败')));
}
}

原文链接：https://www.f2er.com/ajax/160951.html

无刷新上传图片，ajax 和 iframe

猜你在找的Ajax相关文章