无刷新上传图片，ajax 和 iframe ?

发布时间：2020-12-16 03:19:10 所属栏目：百科来源：网络整理

导读：iframe 上传 upload.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 !DOCTYPEhtml htmllang= "en" head metacharset= "UTF-8" titleTitle/title scriptsrc= "http://www.diantang.cn/jquery/3.2.1/jqu

iframe 上传

upload.html

<!DOCTYPEhtml>

<htmllang= "en" >

<head>

<metacharset= "UTF-8" >

<title>Title</title>

<scriptsrc= "http://www.diantang.cn/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://www.pangdan.com/images/chunwan.gif" />

<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' >

var lastFileName;

$( "#fileipt" ).change( function (){

var fileName=$( this ).val();

var pos=fileName.lastIndexOf( "" );

fileName=fileName.substr(pos+1,fileName.length); //截取出文件名因为会带路径

lastFileName=fileName;

$( "#submit" ).click();

});

function stopSend($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 无刷新上传图片

< button id = "J_headimg" style = "font-size:12px;margin-left:10px;width:70px;height:30px;background:#10AD5A;color:#fff;" >修改头像</ button >

< input type = "file" name = "pic" id = "pic" hidden accept = "image/*" />

< input type = "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方法

public function uploadimg(){

$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' => '上传失败' )));

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!