Home > Web Front-end > JS Tutorial > js dynamically creates an upload form and simulates Ajax through iframe to achieve no refresh_javascript skills

js dynamically creates an upload form and simulates Ajax through iframe to achieve no refresh_javascript skills

WBOY
Release: 2016-05-16 16:59:02
Original
833 people have browsed it
复制代码 代码如下:

<script> <br>window.onload=function(){ <br>upfile('file.php'); <br>} <br><br><br>/* <br>** url 路径 <br>**/ <br>function upfile(url){ <br>//创建iframe <br>var iframe = document.createElement("iframe"); <br>document.body.appendChild(iframe); <br>iframe.id = 'iframeName'; <br>iframe.name = 'iframeName'; <br>iframe.style.display = 'none'; <br>//创建form <br>var turnForm = document.createElement("form"); <br>document.body.appendChild(turnForm); <br>turnForm.method = 'post'; <br>turnForm.action = url; <br>turnForm.encoding = "multipart/form-data"; <br>turnForm.name = 'formNamer'; <br>turnForm.target = 'iframeName'; <br>//创建隐藏表单 <br>var newElement = document.createElement("input"); <br>newElement.setAttribute("name","inputname"); <br>newElement.setAttribute("type","file"); <br>newElement.setAttribute("value",''); <br>turnForm.appendChild(newElement); <br>} <br><br>//form提交 <br>function formSubmit() { <br>//var res = document.formNamer.inputname.value; <br>document.formNamer.submit(); <br>} <br><br>//返回值 <br>function callback(result){ <br>//window.parent.document.getElementById('iframeName').style.display = 'block'; 通过iframe 查看后台数据 <br>if(result['error'] == 0){ <br>document.getElementById('test').src= result['img'][1] '/' result['img'][2]; <br>}else if(result['error'] == 1){ <br>alert(result['meg']); <br>}else if(result['error'] == 2){ <br>alert(result['meg']); <br>}else if(result['error'] == 3){ <br>alert(result['meg']); <br>}else if(result['error'] == 4){ <br>alert(result['meg']); <br>}else{ <br>alert(result['meg']); <br>} <br><br>} <br><br></script>

上传


file.php
复制代码 代码如下:

header("content-Type: text/html; charset=Utf-8");

if(@is_uploaded_file($_FILES['inputname']['tmp_name'])){

$f = $_FILES['inputname'];
$name = $f["name"];
$size = $f["size"];
$type = $f["type"];
$fileName = $f["tmp_name"];

switch ($type) {
case 'image/jpg':$okType = true;
break;

case 'image/jpeg':$okType = true;
break;

case 'image/png':$okType = true;
break;

case 'image/gif':$okType = true;
break;
}

if($okType){
$error = $f["error"];
echo '文件名称:'.$name.'
';
echo '文件类型:'.$type.'
';
echo '文件大小:'.round($size/1024).'K
';
echo '文件临时存放路径:'.$fileName.'
';

$fileDir = dirname(__FILE__).'/img/upfile'.time().$name;
$img = explode('/',$fileDir);

move_uploaded_file($fileName, $fileDir);

$data = array();
$data['img'] = $img;
$data['name'] = $name;
$data['type'] = $type;
$data['size'] = $size;
$data['filename'] = $fileName;
$data['fileDir'] = $fileDir;

if($error==0){
/*echo '上传成功!';
echo '预览:';
echo "
";
echo '文件名称'.$img[2];*/
$data['error'] = 0;
exit("<script>parent.callback(".json_encode($data).");</script>");

}elseif($error==1){
$data['error'] = 1;
$data['meg'] = '超过了文件大小,在php.ini文件中设置';
exit("<script>parent.callback(".json_encode($data).");</script>");
}elseif ($error==2){
$data['error'] = 2;
$data['meg'] = '超过了文件的大小MAX_FILE_SIZE选项指定的值';
exit("<script>parent.callback(".json_encode($data).");</script>");
}elseif ($error==3){
$data['error'] = 3;
$data['meg'] = '文件只有部分被上传';
exit("<script>parent.callback(".json_encode($data).");</script>");
}elseif ($error==4){
$data['error'] = 4;
$data['meg'] = '没有文件被上传';
exit("<script>parent.callback(".json_encode($data).");</script>");
}else{
$data['meg'] = '上传文件大小为0';
exit("<script>parent.callback(".json_encode($data).");</script>");
}

}
}else{
$data['error'] = 4;
$data['meg'] = '没有文件被上传';
exit("<script>parent.callback(".json_encode($data).");</script>");
}
?>
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template