這篇文章主要介紹了js動態創建上傳表單通過iframe模擬Ajax無刷新的具體實現,需要的朋友可以參考下
代碼如下: <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>"); } ?>