本文介绍将表单里的文字信息与文件一同异步上传的一个小demo，并且不将图片转化为base64格式。
1、首先，前台页面：form_file_unload.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title></title>
<style>
h3{height:20px;}
span{float:left;font-size:12px;line-height:20px;}
input{float:left;height:20px;margin-left:5px;}
#img_box{margin-top:65px;width:100%;height:400px;}
#img_box iframe{width:100%;height:100%;}
#img_box img{float:left;display: block;width:100px;height:100px;margin:15px; border:1px solid #ccc;}
#sub{display:block;margin-top:15px;}
.clear{clear: both;}
</style>
<script type="text/javascript" src="../js/zepto.min.js" ></script>
</head>
<body>
<!--method="post" enctype="multipart/form-data" action=""-->
<form name='form1' id="form_box">
<h3><span>姓名:</span><input type="text" name="username" /></h3>
<h3><span>年龄:</span><input type="text" name="age" /></h3>
<h3><input type="file" id="file" name="myFile" multiple/></h3>
</form>
<div id="tip"></div>
<input type="button" value="提交" id="sub"/>
<div id="img_box">
<h3>图片集合</h3>
<iframe src="read_file.php" id="iframe"></iframe>
</div>
</body>
<script>
$('#sub').click(function(){
//var a = new FormData();//未指定form表单
var a=new FormData($('#form_box')[0]);//指定form表单
// a.append('myFile', $('#file')[0].files[0]);
a.append('borrow_man_id','1');
$.ajax({
url:"unload.php",
xhrFields:{
withCredentials:true
},
type: "POST",
cache: false,
data: a,
processData: false,
contentType:false,
async: true,
success: function (result) {
$('#tip').html(result);
fresh_img();
}
})
});
function fresh_img(){
$('#iframe').attr('src','read_file.php');
}
</script>
</html>可以通过append方法添加其他信息：
a.append('borrow_man_id','1');页面效果展示：
2、我们输入表单信息，再添加一张图片（已限制jpg,png,jpeg），通过ajax提交至unload.php：
<?php
header("content-type:text/html;charset=utf-8");
//var_dump($_FILES) ;exit;
$filename=$_FILES['myFile']['name'];//上传的文件名字
$type_name=substr(strrchr($filename, '.'), 1);//获取文件名后缀
//如果不是jpg或者png的后缀，则返回错误值
if($type_name!='jpg' && $type_name!='png' && $type_name!='jpeg' ){
echo '请上传jpg,png,jpeg格式的文件';
exit;
}
$type=$_FILES['myFile']['type'];
$tmp_name=$_FILES['myFile']['tmp_name'];//文件地址
$size=$_FILES['myFile']['size'];//大小
$error=$_FILES['myFile']['error'];//状态
move_uploaded_file($tmp_name, "files/".iconv("UTF-8", "gbk",'test_img.'.$type_name));//此处防止图片上传过多文件名写死为test_img,新图片会覆盖旧图片，实际应为$filename
if ($error==0) {
echo "上传成功！";
}else{
switch ($error){
case 1:
echo "超过了上传文件的最大值，请上传2M以下文件";
break;
case 2:
echo "上传文件过多，请一次上传20个及以下文件！";
break;
case 3:
echo "文件并未完全上传，请再次尝试！";
break;
case 4:
echo "未选择上传文件！";
break;
case 5:
echo "上传文件为0";
break;
}
}代码里面没有写接受表单信息的代码，但是从请求信息里可以看到是同时发送的：
图片已在文件夹下：
3、现在我们将上传的图片读取出来read_file.php：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<style>
img{float:left;display: block;width:100px;height:100px;margin:15px; border:1px solid #ccc;}
</style>
</head>
<body>
</body>
</html>
<?php
header("content-type:text/html;charset=utf-8");
$hostdir=dirname(__FILE__).'/files/'; //要读取的文件夹
$url = '/files/'; //图片所存在的目录
$www = 'http://localhost/php/file'; //域名
$filesnames = scandir($hostdir); //得到所有的文件
$str="QWERTYUIOPASDFGHJKLZXCVBNM1234567890qwertyuiopasdfghjklzxcvbnm";//随机字符串的字母
// print_r($filesnames);exit;
//获取也就是扫描文件夹内的文件及文件夹名存入数组 $filesnames
foreach ($filesnames as $name) {
if ($name!="." && $name!="..") {
$name = iconv('gbk', 'utf-8', $name);
$temp_str=substr(str_shuffle($str),26,10);//生成随机字符串
$aurl= "<img width='100' height='100' src='".$www.$url.$name."?".$temp_str."' alt = '".$name."'>"; //图片
echo $aurl; //输出他
}
}结果：
demo地址：点击打开链接