一个伪ajax图片上传实现代码。

复制代码代码如下:
<?php 
if($_FILES){ 
?> 
<script> 
window.parent.ajaxUploadPicture.uploadCallback('http://img0.bdstatic.com/img/image/5099213b07eca8065380ce7f75e95dda144ad348269.jpg'); 
</script> 
<?php 
die; 
} 
?> 
<!DOCTYPE html> 
<html> 
<head> 
<script> 
// www.jbxue.com
ajaxUploadPicture = { $o1:'' }; 
ajaxUploadPicture.ajaxUploadFile = function ($o){ 
this.$o1 = $o; 
var $iframe = document.createElement('iframe'); 
$iframe.style.display = 'none'; 
$iframe.name = 'iframe'; 
$iframe.id = 'iframe'; 
document.body.appendChild($iframe); 
var $form = document.createElement("form"); 
$form.method = "post"; 
$form.enctype = "multipart/form-data"; 
$form.action = ""; 
$form.target = 'iframe'; 
$newO = $o.cloneNode(); 
$form.appendChild($newO); 
$form.submit(); 
} 
ajaxUploadPicture.uploadCallback = function ($url){ 
$pic = document.createElement('img'); 
$pic.width = "200"; 
$pic.height = "150"; 
$pic.src = $url; 
if(document.getElementById('picshow') == null){ 
$div = document.createElement("div"); 
$div.id = 'picshow'; 
this.$o1.parentNode.insertBefore($div,this.$o1.nextSibling); 
}else{ 
$div = document.getElementById('picshow'); 
} 
$div.innerHTML = ''; 
$div.appendChild($pic); 
}; 
</script> 
</head> 
<body> 
<input type="file" name="file" onchange = "ajaxUploadPicture.ajaxUploadFile(this);"> 
</body> 
</html> 

面向对象思想，form提交到一个隐藏的iframe，执行回调js函数。实现图片回显。后台php的功能没有完善。

一个伪ajax图片上传代码的例子的更多相关文章

  1. 两个由于php.ini配置错误导致的报错:ajax图片上传报错和exec报错

    遇到了两个由于php.ini配置错误导致的报错:ajax图片上传报错和exec报错 首先第一个: 在做一个用ajax图片上传的功能中,php报了这样一个错误:File upload error - u ...

  2. ajax图片上传(asp.net +jquery+ashx)

    一.建立Default.aspx页面 <%@ Page Language="C#" AutoEventWireup="true"  CodeFile=&q ...

  3. ajax图片上传及FastDFS入门案例.

    今天来开始写图片上传的功能, 现在的图片上传都讲求 上传完成后立刻回显且页面不刷新, 这里到底是怎么做的呢? 当然是借助于ajax了, 但是ajax又不能提交表单, 这里我们还要借助一个插件: jqu ...

  4. 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]

    Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件的 Javascript 组件. This project attempts to achi ...

  5. [Fine Uploader] 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]

    Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件的 Javascript 组件   This project attempts to ach ...

  6. ajax图片上传功能

    一.应用场景 当用户需要上传图片当做自己的头像时,预览的时候该图片需要在本地预览,不应该通过网络从服务器上取到之后预览 二.实现方法 1.方法1: 注释:给上传文件的input标签绑定一个change ...

  7. 用Ajax图片上传、预览、修改图片

    首选图片的上传和下载并不是很难,但要注意细节. 一,给出前端图片上传的html代码 1.图片上传的控件 <img src="/${res}/images/default.png&quo ...

  8. [python][flask] Flask 图片上传与下载例子（支持漂亮的拖拽上传）

    目录 1.效果预览 2.新增逻辑概览 3.tuchuang.py 逻辑介绍 3.1 图片上传 3.2 图片合法检查 3.3 图片下载 4.__init__.py 逻辑介绍 5.upload.html ...

  9. 发现一个微博图床API和图片上传代码

    网上寻到一款微博图床的插件,然后顺藤摸瓜找到了原作者的API代码. API文件: <?php /** * 上传图片到微博图床 * @author Youngxj & mengkun &a ...

随机推荐

  1. Android SDK Manager 设置代理

    直接启用 Android SDK Manager 的命令如下: 在SDK 的 tools 目录下执行: ./android sdk 就会进入 Android SDK Manager   设置代理 在 ...

  2. [SQL]多列的行转列

    create table t(name varchar(),subject varchar(),mark int) insert into t union all union all union al ...

  3. [SQL]SQL Server数据表的基础知识与增查删改

    SQL Server数据表的基础知识与增查删改 由张晨辉(学生) 于19天 前发表 | 阅读94次 一.常用数据类型 .整型:bigint.int.smallint.tinyint .小数:decim ...

  4. LeetCode 125. Valid Palindrome

    这个题目只要注意大小写问题即可解决,而且我们只关注的是字母和数值 Given a string, determine if it is a palindrome, considering only a ...

  5. IOS开发-跨域访问DWR方法

    用Phonegap做手机客户端,服务器用spring+DWR,需要在手机端访问服务器的方法,需要做以下配置,可以参见http://www.iteye.com/topic/337460: 服务器DWR配 ...

  6. Maven本地资源库

    在本地安装的mvn文件夹中找到conf/setting.xml,然后找到localRepository结点,这个路径值就是Maven的实际路径 打开该文件夹就能够看到

  7. SDUT 3344 数据结构实验之二叉树五：层序遍历

    数据结构实验之二叉树五:层序遍历 Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Problem Description 已知一个按 ...

  8. 【ITOO 2】使用ArrayList时的注意事项：去除多余的null值

    问题描述:在课表导入的时候,将数据从excel表里读出,然后将list批量插入到对应的课程表的数据表单中去,出现结果:当我们导入3条数据时,list.size()为3,但是实际上,list里面存在10 ...

  9. iptable原理

    http://www.cnblogs.com/littlehann/p/3708222.html http://seanlook.com/2014/02/23/iptables-understand/ ...

  10. ENVI二次开发模式下的Landsat数据读取

    从usgs网站或者马里兰大学下载TM或Landsat原始数据,数据可能包括9个tif数据,两个txt文件和一个gtf文件.示例结构如下: ENVI下可以直接打开*_MTL.txt文件打开,打开后波段列 ...