zoukankan      html  css  js  c++  java
  • 一个伪ajax图片上传代码的例子

    一个伪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的功能没有完善。
  • 相关阅读:
    常用脚本语言Perl,Python,Ruby,Javascript一 Perl,Python,Ruby,Javascript
    Android中Linux suspend/resume流程
    Linux计算机进程地址空间与内核装载ELF
    Linux操作系统工作的基础
    Tomcat 系统架构与设计模式,第 2 部分: 设计模式分析
    基础算法题
    多模式字符串匹配(转)
    二叉树题集
    概率及数学题
    字符串算法题
  • 原文地址:https://www.cnblogs.com/linuxnotes/p/3606733.html
Copyright © 2011-2022 走看看