6.28 头像预览：form方法和ajax方法
一用form实现头像预览
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="../public/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<title>Document</title>
<style type="text/css">
#sc{
display:none;
}
#showing{
width:100px;
height: 100px;
background-image: url(../0626liucheng/upfile/1530091054aa.jpg);
background-size:100% 100%;
}
#upfile{
opacity:0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<form action="chuli.php" method="post" id="sc_form" enctype="multipart/form-data" target="sc">
<div id="showing"> <!-- target 属性规定在何处打开 action URL。-->
<input type="file" name="upfile" id="upfile" value="" onchange="$('#sc_form').submit()"/>
</div>
</form>
<!--<iframe> 标签规定一个内联框架。
一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。-->
<iframe id="sc" name="sc" src="" width="" height="">
<!--PHP传过来的js代码-->
</iframe>
</body>
</html>
<script type="text/javascript">
//当提交表单时，会发生 submit 事件。
/*function aa(){
$("#sc_form").submit();
}*/
function showImage(url){
//alert(url);
$("#showing").css("background-image","url("+url+")");
}
</script>
============================处理页面=======================================
<?php
//var_dump($_FILES['upfile']);
$name = $_FILES['upfile']['name'];
$type = $_FILES['upfile']['type'];
$tmp_name = $_FILES['upfile']['tmp_name'];//储存的临时文件名，一般是系统默认。
$error = $_FILES['upfile']['error'];
$size = $_FILES['upfile']['size'];
if(!empty($name)){
if($error<=0){
if($type =="image/jpeg"){
if($size<=100000){
if(!is_dir("./upfile/")){
mkdir("./upfile/");
}
$path ="./upfile/".$name;
//转换编码格式
//$filename = iconv("UTF-8","gb2312",$filename);
if(move_uploaded_file($tmp_name,$path)){
echo "<script> window.parent.showImage('{$path}');</script>";
//在iframe的父级当前页面调用js代码
}
}
}
}
}
?>
二 用ajax方法实现头像预览
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="../public/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../public/ajaxfileupload.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#showing{
width:100px;
height: 100px;
background-image: url(../0626liucheng/upfile/1530091054aa.jpg);
background-size:100% 100%;
}
#upfile{
opacity:0;
width:100%;
height: 100%;
}
</style>
</head>
<body>
<div id="showing">
<input type="file" name="upfile" id="upfile" value="" title="上传附件" />
</div>
<input type="button" value="上传" onclick="upload()"/>
</body>
</html>
<script type="text/javascript">
function upload(){
var path = $("#upfile").val();
if($.trim(path)==""){
alert("请选择要上传的文件");
return;
}
$.ajaxFileUpload({
type:"post",
url:"chuli2.php",//这是服务器处理的代码
secureuri:false,//是否启用安全提交，默认为false
fileElementId:'upfile',//上传文件的id，name属性名
dataType:"text",//返回值类型，一般设置为json，application/json
data:{
},//传递参数到服务器
success:function(data){
$("#showing").css("background-image","url("+data+")");
}
});
$
}
</script>
<?php
//var_dump($_FILES['upfile']);
$name = $_FILES['upfile']['name'];
$type = $_FILES['upfile']['type'];
$tmp_name = $_FILES['upfile']['tmp_name'];//储存的临时文件名，一般是系统默认。
$error = $_FILES['upfile']['error'];
$size = $_FILES['upfile']['size'];
if(!empty($name)){
if($error<=0){
if($type =="image/jpeg"){
if($size<=100000){
if(!is_dir("./upfile/")){
mkdir("./upfile/");
}
$path ="./upfile/".$name;
//转换编码格式
//$filename = iconv("UTF-8","gb2312",$filename);
if(move_uploaded_file($tmp_name,$path)){
echo $path;
}
}
}
}
}
?>
