异想天开

What's the true meaning of light, Could you tell me why

php上传图片

日期:2015-01-29 13:52:03
  
最后更新日期:2015-06-26 10:05:47
【需求】
给用户提供一个页面,配置一些信息,同时需要上传两张图片。

开始想到就是html的一个form表单,用type为text的input控件录入信息,然后嵌套一个form表单,用type为file的input控件提交文件,因为提交文件要求form的enctype="multipart/form-data"。后面发现form不能嵌套。问了同事后,使用的整体方案是:
点击上传后,打开一个新页面,在该页面上上传,该页面form表单的target指向本页面的一个iframe,监听iframe的load事件,当后端返回的图片地址后,iframe的load事件的处理函数中,把得到图片地址后,更新父页面的对应的id控件。 把这个做成了一个小小的demo,提供给用户的展示页面,也就是父页面:
[code ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Upload Image</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
function uploadimg(inputobj){
window.open("http://10.1.4.77:81/upload.html?id="+inputobj,null,"height=600,width=600");
}
</script>
<form >
<table>
<tbody>
<tr><td><lable>图片地址:</lable></td><td><input id="img1" type="text" name="img1" value=""/></td><td><input type="button" value="上传" onclick=uploadimg("img1")></td></tr>
<tr><td><lable>图片地址:</lable></td><td><input id="img2" type="text" name="img2" value=""/></td><td><input type="button" value="上传" onclick=uploadimg("img2")></td></tr>
</tbody>
</table>
</form>
</body>
</html>
[/code]
打开upload.html页面:
[code lang="cpp"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Upload Image</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<style>
#exec_target{display:none;width:0;height:0;}
#feedback{width:1200px;margin:0 auto;}
</style>
<script type="text/javascript">
//取得name参数的值
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}

$(document).ready(function(){
//选择文件成功则提交表单
$("#upload_file").change(function(){
if($("#upload_file").val() != '') $("#submit_form").submit();
});
//iframe加载响应,初始页面时也有一次,此时data为null。
$("#exec_target").load(function(){
var data = $(window.frames['exec_target'].document.body).find("textarea").html();
//若iframe携带返回数据,则显示在feedback中
if(data != null){
$("#feedback").append(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>'));
var feeddata=$("#feedback").html();
$("#upload_file").val('');
var id=getQueryString("id");
var ccstr="window.opener.document.all."+id+".value"+"='"+feeddata+"';";
eval(ccstr);
}
});
});
</script>
<form id="submit_form" method="post" action="upload.php" target="exec_target" enctype="multipart/form-data">
<input type="file" name="file" id="upload_file"> <!-- 添加上传文件 -->
</form>
<iframe id="exec_target" name="exec_target"></iframe> <!-- 提交表单处理iframe框架 -->
<div id="feedback"></div> <!-- 响应返回数据容器 -->
</body>
</html>
[/code]
php后台处理的upload.php文件:
[code lang="cpp"]
<?php
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
echo "<textarea>";
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 200000)
&& in_array($extension, $allowedExts))
{
if ($_FILES["file"]["error"] > 0)
{
echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
}
else
{
date_default_timezone_set("PRC");
$date_dir="Public/imgcdn/". date("Ymd").$_FILES["file"]["name"];
if (file_exists($date_dir))
{
echo $date_dir . " already exists. ";
}
else
{
move_uploaded_file($_FILES["file"]["tmp_name"],
$date_dir);
echo "http://10.1.4.77:81/" . $date_dir;
}
}
}
else
{
echo '上传准许的格式为"gif", "jpeg", "jpg", "png"';
}
echo "</textarea>";
?>
[/code]