方法一：from表单
html
设置form表单，内包含头像预览div，内包含上传文件input
设置iframe用来调用函数传参路径
<!--表单提交成功后不跳转处理页面，而是将处理数据返回给iframe框架，用target属性，属性值为框架的name--> <form id="form1" action="chuli.php" method="post" enctype="multipart/form-data" target="sc"> <!--头像显示位置--> <div id="show"> <!--删除了提交按钮，设置当路径改变时执行表单提交，脚本语句可以直接写在函数后--> <!--文件上传设为透明，充满整个div，使得点击头像框时可以执行浏览图片--> <input type="file" id="file" name="file" onchange="$(‘#form1‘).submit();"/> </div> </form> <!--框架--> <iframe id="sc" name="sc"></iframe>
js
function showImage(path){ $(‘#show‘).css(‘background-image‘,‘url(‘+path+‘)‘); } //onchange后面的调用函数 // function aa(){ // $(‘#form1‘).submit(); // }
php
//文件名 $name = $_FILES[‘file‘][‘name‘]; //文件类型 $type = $_FILES[‘file‘][‘type‘]; //临时路径 $tmp_name = $_FILES[‘file‘][‘tmp_name‘]; //错误代码 $error = $_FILES[‘file‘][‘error‘]; //文件大小 $size = $_FILES[‘file‘][‘size‘]; //如果文件名不为空则向下判断 if(!empty($name)){ //如果错误等于0 则没有错误，往下判断 if($error == 0){ //文件类型为图片时 if($type == ‘image/png‘){ //文件大小小于100000b if($size <=100000){ //如果不存在文件夹upfile if(!is_dir("./image/")){ //创建文件夹upfile mkdir("./image/"); } //定义时间戳 $time = time(); //文件路径设置为 $path = "./image/".$time.$name; //如果文件移动成功 if(move_uploaded_file($tmp_name,$path)){ //返回给页面的数据 //因为iframe为页面的子元素，所以.parent为页面，.showImage为其中的函数，$path为传参路径 echo "<script>window.parent.showImage(‘{$path}‘)</script>"; }else{ echo‘上传失败‘; } //否则则输出文件过大 }else{ echo‘文件过大‘; } //若不是图片则输出格式不对 }else{ echo‘文件格式不对‘; } //错误代号，输出各种错误意思。 }else{ switch($error){ case ‘1‘: echo ‘上传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值‘; break; case ‘2‘: echo ‘传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值。‘; break; case ‘3‘: echo ‘文件只有部分被上传‘; break; case ‘4‘: echo ‘没有文件被上传‘; break; } } //文件名为空，则输出文件为空 }else{ echo ‘文件为空‘; }
方法二：ajax
html
<!--头像框，设置宽高，背景图，背景大小100%--> <div id="showing"> <!--上传文件，设置宽高100%，透明--> <input type="file" id="file" name="file" onchange="upload()" /> </div> <!--<input type="button" value="上传" onclick="upload()" />-->
js
function upload(){ //拿到文件名 var path = $(‘#file‘).val(); //如果文件名中的换行空格等，为空则提示要选择文件 if($.trim(path) == ""){ alert(‘请选择要选择的文件‘); return; } $.ajaxFileUpload({ url:‘chuli.php‘, type:‘post‘, secureuri:false,//是否启用安全提交，默认false fileElementId:‘file‘,//上传文件的id，name属性名 dataType:‘text‘, data:{}, success:function(data){//console.log(data); $(‘#showing‘).css(‘background-image‘,‘url(‘+data+‘)‘); } }); }
php与上面相同，只是返回值只为文件路径。
$name = $_FILES[‘file‘][‘name‘]; $type = $_FILES[‘file‘][‘type‘]; $tmp_name = $_FILES[‘file‘][‘tmp_name‘]; $error = $_FILES[‘file‘][‘error‘]; $size = $_FILES[‘file‘][‘size‘]; if(!empty($name)){ if($error == 0){ if($type == ‘image/png‘){ if($size <=100000){ if(!is_dir("./image/")){ mkdir("./image/"); } $time = time(); $path = "./image/".$time.$name; if(move_uploaded_file($tmp_name,$path)){ echo $path; }else{ echo‘上传失败‘; } } } } }
trim() 函数移除字符串两侧的空白字符或其他预定义字符。
- "\0" - NULL
- "\t" - 制表符
- "\n" - 换行
- "\x0B" - 垂直制表符
- "\r" - 回车
- " " - 空格
原文：https://www.cnblogs.com/SSs1995/p/9239681.html