脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → AJAX相关 → 图片上传代码

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

 更新时间：2014年03月17日 16:44:46   作者：  
这篇文章主要介绍了自己写的一个伪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>


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的功能没有完善。
您可能感兴趣的文章:

相关文章

  • jquery ajax实现文件上传功能实例代码

    jquery ajax实现文件上传功能实例代码

    这篇文章主要介绍了jquery ajax实现文件拖拽上传功能的实例代码,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2018-04-04
  • ajax返回的json内容进行排序使用sort()方法实现

    ajax返回的json内容进行排序使用sort()方法实现

    关于ajax返回的json内容进行排序，主要使用sort()对数组的元素进行排序，具体实现如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
    2013-07-07
  • 深入理解ajax系列第一篇之XHR对象

    深入理解ajax系列第一篇之XHR对象

    ajax是asynchronous javascript and XML的简写，中文翻译是异步的javascript和XML，这一技术能够向服务器请求额外的数据而无须卸载页面，会带来更好的用户体验
    2016-11-11
  • 通过Ajax请求动态填充页面数据的实例

    通过Ajax请求动态填充页面数据的实例

    今天小编就为大家分享一篇通过Ajax请求动态填充页面数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Ajax加载菊花loding效果

    Ajax加载菊花loding效果

    这篇文章主要介绍了Ajax加载菊花loding效果的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-07-07
  • 浅谈Ajax相关及其优缺点

    浅谈Ajax相关及其优缺点

    最近在学习有关 AJAX 的知识，上网查阅了一些有关 AJAX 的资料，主要是有关 AJAX的技术简介及其优缺点等。在这里，我想对我收集的资料做一些小小的总结，大部分资料都来自网上，本人在此只做分类总结，希望对和我一样正在学习 AJAX 的朋友有一定的帮助。
    2015-06-06
  • AjaxFileUpload+Struts2实现多文件上传功能

    AjaxFileUpload+Struts2实现多文件上传功能

    这篇文章主要介绍了AjaxFileUpload+Struts2实现多文件上传功能,需要的朋友可以参考下
    2017-09-09
  • ajax无刷新评论功能

    ajax无刷新评论功能

    这篇文章主要为大家详细介绍了ajax无刷新评论功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • ASP小偷程序如何利用XMLHTTP实现表单的提交

    ASP小偷程序如何利用XMLHTTP实现表单的提交

    ASP小偷程序如何利用XMLHTTP实现表单的提交...
    2006-07-07
  • 简单实现Ajax无刷新分页效果

    简单实现Ajax无刷新分页效果

    这篇文章主要为大家详细介绍了简单实现Ajax无刷新分页效果的代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05

最新评论