Posted in Javascript onFebruary 20, 2014
<script> window.onload=function(){ upfile('file.php'); } /* ** url 路径 **/ function upfile(url){ //创建iframe var iframe = document.createElement("iframe"); document.body.appendChild(iframe); iframe.id = 'iframeName'; iframe.name = 'iframeName'; iframe.style.display = 'none'; //创建form var turnForm = document.createElement("form"); document.body.appendChild(turnForm); turnForm.method = 'post'; turnForm.action = url; turnForm.encoding = "multipart/form-data"; turnForm.name = 'formNamer'; turnForm.target = 'iframeName'; //创建隐藏表单 var newElement = document.createElement("input"); newElement.setAttribute("name","inputname"); newElement.setAttribute("type","file"); newElement.setAttribute("value",''); turnForm.appendChild(newElement); } //form提交 function formSubmit() { //var res = document.formNamer.inputname.value; document.formNamer.submit(); } //返回值 function callback(result){ //window.parent.document.getElementById('iframeName').style.display = 'block'; 通过iframe 查看后台数据 if(result['error'] == 0){ document.getElementById('test').src= result['img'][1]+'/'+result['img'][2]; }else if(result['error'] == 1){ alert(result['meg']); }else if(result['error'] == 2){ alert(result['meg']); }else if(result['error'] == 3){ alert(result['meg']); }else if(result['error'] == 4){ alert(result['meg']); }else{ alert(result['meg']); } } </script> <a href="javascript:formSubmit()">上传</a> <img src="http://blog.163.com/zhwxl_zyx/blog/img/pasic.jpg" id="test" width="200" height="200">
file.php
<?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.'<br>'; echo '文件类型:'.$type.'<br>'; echo '文件大小:'.round($size/1024).'K<br>'; echo '文件临时存放路径:'.$fileName.'<br>'; $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 "<img src="http://blog.163.com/zhwxl_zyx/blog/.$img[1].'/'.$img[2]." width='200' height='200'><br>"; 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>"); } ?>
js动态创建上传表单通过iframe模拟Ajax实现无刷新
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@