js动态创建上传表单通过iframe模拟Ajax实现无刷新_javascript技巧

复制代码 代码如下:

<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>");
}
?>

时间: 2024-08-25 04:34:11

js动态创建上传表单通过iframe模拟Ajax实现无刷新_javascript技巧的相关文章

js动态创建上传表单通过iframe模拟Ajax无刷新的具体实现

 这篇文章主要介绍了js动态创建上传表单通过iframe模拟Ajax无刷新的具体实现,需要的朋友可以参考下  代码如下: <script>  window.onload=function(){  upfile('file.php');  }      /*  ** url 路径  **/  function upfile(url){  //创建iframe  var iframe = document.createElement("iframe");  document.b

js实现文件上传表单域美化特效_javascript技巧

一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法 这些文件上传域的美化使用的方法都是隐藏原生的<input type="file">元素,然后使用一个<label>元素来制作美化效果. HTML结构 该文件上传域美化效果最基本的HTML结构如下: <input type="file" name="file" id="file" class=&qu

JS实现表单多文件上传样式美化支持选中文件后删除相关项_javascript技巧

开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进行完善. 本文根据一个例子,对多文件的上传样式做了一些简单的美化(其实也没怎么美化..),同时支持选择文件后自定义删除相关的文件,最后再上传 文章篇幅较长,先简单看看图示: 一.文件上传基础 1. 单文件上传 最简单的文件上传,是单文件上传,form标签中加入enctype="multipart/f

php文件上传表单摘自drupal的代码

drupal文件上传表单的例子 复制代码 代码如下: function upload_form() { $form = array(); // If this #attribute is not present, upload will fail on submit $form['#attributes']['enctype'] = 'multipart/form-data'; $form['file_upload'] = array( '#title' => t('Upload file'),

php文件上传表单摘自drupal的代码_php技巧

drupal文件上传表单的例子 复制代码 代码如下: function upload_form() { $form = array(); // If this #attribute is not present, upload will fail on submit $form['#attributes']['enctype'] = 'multipart/form-data'; $form['file_upload'] = array( '#title' => t('Upload file'),

利用label标签和CSS美化文件上传表单

文件上传类型表单<input type="file" />是一个让很多前端开发者纠结过的表单类型,因为它是一个无法单纯用CSS给它定义兼容的样式.上周的工作中有个批量上传图片的页面,又遇到了这个问题,于是,今天把我的解决方案奉献给大家:利用label标签与CSS共同打造一个样式可控的并兼容IE6之外主流浏览器的上传表单. 实现思路通俗易懂: 首先,我们要新增一个与file相册大小的button按钮,然后利用label为初始的file类型表单定义标注(关于label的解释与用

带有图片预览功能的上传表单完整HTML

  带有图片预览功能的上传表单,完整的HTML代码如下所示 <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"> <title>带有图片预览功能的上传表单webjx.com</title> <script> functionviewmypic(mypic,imgfile){ if(imgfi

java-form上传表单怎么把上传的参数也传到action

问题描述 form上传表单怎么把上传的参数也传到action 我今天写了一个发布新闻的表单,有一些参数,还有图片,我想上传到后台,可是有一个属性怎么也传不过去,一直是null,怎么解决呢? 解决方案 form表单提交上传附件 解决方案二: 表单中元素的name和action中的属性名字一样就行了,action中要有set方法 解决方案三: form会自动将里面的东西同上传上去,看看是不是名字写错了 解决方案四: serialize()对表单进行序列化一下

jquery实现简洁文件上传表单样式_jquery

文章开始先告诉大家制作jquery实现简洁文件上传表单样式的简易教程. 效果图: 页面结构: <div class="uploader white"> <input type="text" class="filename" readonly="readonly"/> <input type="button" name="file" class="b