iframe实现伪AJAX无刷新文件上传
<无详细内容>
<html>
<head>
<title>iframe无刷新上传文件/伪ajax上传</title>
<style type="text/css">
#showImg{
border: 1px solid #EEEEEE;
display: table-cell;
height: 91px;
text-align: center;
vertical-align: middle;
width: 101px;
}
.blue{
width:300px;
position:relative;
border: 1px solid #DCE3ED;
}
a:hover{background-color:#D0DEF1;cursor:pointer;}
.icon{
background: url("./images/msg_bg.png") no-repeat scroll left -249px rgba(0, 0, 0, 0);
height: 18px;
width: 16px;
overflow: hidden;
position: absolute;
left: 94px;
bottom: 15px;
z-index: 100;
}
.bc{
background-color:#D0DEF1;
}
</style>
</head>
<body>
<iframe name="upload_file" style="display:none;"></iframe>
<form name="upload_form" action="./upload.php" method="post" enctype="multipart/form-data" target="upload_file">
<input id="fileToUpload" onclick="getName()" type="file" name="fileToUpload">
<input type="submit" id="sub" value="上传" />
</form>
<fieldset id="swfupload" class="blue pad-10">
<legend>列表</legend>
<a id="showImg"></a>
<div class="shownotice"></div>
</fieldset>
</body>
<script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script></script>
<script >
function show(name){
$("#showImg").html("<img width='80' src='./upload/"+name+"' />");
$("#showImg").addClass('bc');
$(".shownotice").addClass('icon');
}
$("#showImg").click(function(){
$(".shownotice").toggleClass('icon');
$("#showImg").toggleClass('bc');
})
</script>
</html>
2. [文件] upload.php ~ 935B 下载(8) 跳至 [1] [2] [全屏预览]
<?php
$file = $_FILES['fileToUpload'];
$fileType = array('image/gif','image/jpeg','image/pjpeg');
$fileSize = 20000;
// $extension = pathinfo($file['name'],PATHINFO_EXTENSION);
// $name = date('YmdHis',time()).rand(1000,9999).'.'.$extension;
if(!in_array($file['type'],$fileType)){
echo "<script>window.parent.alert('类型错误');</script>";exit;
}
if($file['size']>$fileSize){
echo "<script>window.parent.alert('文件太大');</script>";exit;
}
if ($file["error"] > 0){
echo "<script>window.parent.alert('错误类型:".$file["error"]."');</script>";exit;
}
if (file_exists("upload/1" . $file["name"])){
echo "<script>window.parent.alert('".$file["name"] . " already exists.');</script>";
}else{
if(move_uploaded_file($file["tmp_name"],"upload/" . $file["name"])){
echo "<script>window.parent.show('". $file["name"] ."');</script>";
}else{
echo "<script>window.parent.alert('Upload failed!');</script>";
}
}
- 上一篇：简单中文验证码
- 下一篇：Ueditor结合七牛云存储上传图片、附件和图片在线
精彩图集
精彩文章