用户点击选择文件 选好图片后，自动进行一次提交。完成图片的上传。但不修改原引用图片的地址。后续第二次提交是修改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]);
}
}
复制代码
