php 点击选择图片上传,快速实现PHP图片上传和预览

用户点击选择文件 选好图片后，自动进行一次提交。完成图片的上传。但不修改原引用图片的地址。后续第二次提交是修改result文件中引用图片的地址(PS：为了简便这里使用了result文件)，完成整个上传过程。

第一种方法

使用iframe来返回图片。自动提交表单时页面不刷新，通过target进入iframe实现图片预览的功能。

第二次手动提交通过返回js，修改result中引用图片的名称完成整个上传过程。

代码

首页1.php 代码如下。

图片放在了images中。

result文件存放图片地址。

提交

upload.php代码如下。

//定义$image用于存储FILES的image信息

$image = $_FILES['image'];

//定义$filename获取image信息的filename

$filename = $image['name'];

//如果不为空，就是二次提交,否则是第一次提交

if(!empty($_POST['filename'])) {

//修改result文件的filename，完成上传图片的引用

file_put_contents('result',$_POST['filename']);

//跳转回上传页面

return header('Location:1.php');

}else{

//上传成功后返回js

if(move_uploaded_file($image['tmp_name'],"images/".$image['name'])){

//使用1.js中的preview函数返回图片

echo"";

}

}

复制代码

1.js代码如下。

//自动提交方法，第一次上传时自动点击submit

$("input").change(function(){

$("form").submit();

})

function preview(filename){

//不刷新，让图片返回(预览功能)

$("img").attr('src',"images/"+filename);

//清空target，不再进入iframe

$("form").attr("target","");

//第一次提交完成时，添加一个隐藏字段，用于判断是不是二次提交

$("form").append("");

}

复制代码

第二种方法

使用ajax实现。通过json来传输数据。

代码

主页面是2.php 代码如下。

提交

复制代码

2.js代码如下。

//在实际中不建议直接使用input，建议指定某个class。

$("input").change(function(){

//通过ajax异步操作表单。实例化form

var form = new FormData($("form")[0]);

$.ajax({

url: "ajax-upload.php",

type: "POST",

dataType: "json",

data:form,

contentType:false,

processData:false,

success:function(data){

//这里直接使用1.js的代码就可以了。

var filename = data.filename;

$("img").attr('src',"images/"+filename);

$("form").attr("target","");

$("form").append("")

}

})

})

复制代码

ajax-upload.php代码如下。

$image = $_FILES['image'];

$filename = $image['name'];

if(!empty($_POST['filename'])) {

file_put_contents('result',$_POST['filename']);

return header('Location:2.php');

}else{

if(move_uploaded_file($image['tmp_name'],"images/".$image['name'])){

//echo "";

//status 1 表示成功。并传入filename

echo json_encode(['status'=>1,'filename'=>$filename]);

}

}

复制代码