当前位置:  编程技术>php

php+ajax图片文件异步上传示例代码

    来源: 互联网  发布时间：2014-08-30

    本文导语:  常用的异步文件上传功能有几种，比较多见的如使用iframe框架形式，ajax功能效果，以及flash+php功能。 本节脚本小编为大家介绍ajax与iframe实现异步文件上传的功能的例子。 方法一，利用jquery ajaxfileupload.js实现文件上传 实现无...

常用的异步文件上传功能有几种，比较多见的如使用iframe框架形式，ajax功能效果，以及flash+php功能。

本节脚本小编为大家介绍ajax与iframe实现异步文件上传的功能的例子。

方法一，利用jquery ajaxfileupload.js实现文件上传
实现无刷新式的文件上传。可采用IFRAME文件上传原理。
实际上在用PHP上传文件时。只能用$_FILES形式，但是若只是单一的用JS方式取其ID，如..document.getElementById('img').value或者jquery形式的$("#img")都是不能正真实际上传的（但是还是有很多人这样做，刚开始时我也是）。
可是功能上又要要求实现所谓的“异步上传”，怎么办呢？只能借助于第三方的组件，或自己写一个（在网页里嵌入一个IFRAME）。
但如果是考虑开发时间，建议用第三方的，这里有一个不错的jQuery 的Ajax文件上传的组件，即“ajaxfileupload.js",基内容为：
 

代码示例:

jQuery.extend({
    createUploadIframe: function(id, uri)
 {
 //create frame
            var frameId = 'jUploadFrame' + id;
            var iframeHtml = '';
jQuery(iframeHtml).appendTo(document.body);

return jQuery('#' + frameId).get(0);
    }, // www.
    createUploadForm: function(id, fileElementId)
 {
//create form 
var formId = 'jUploadForm' + id;
var fileId = 'jUploadFile' + id;
var form = jQuery(''); 
var oldElement = jQuery('#' + fileElementId);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);
//添加参数支持
if(data){
$.each(data,function(key,value){
 $("").appendTo(form);
})
}
//set attributes
jQuery(form).css('position', 'absolute');
jQuery(form).css('top', '-1200px');
jQuery(form).css('left', '-1200px');
jQuery(form).appendTo('body');
return form;
    },

    ajaxFileUpload: function(s) {
        // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout
        s = jQuery.extend({}, jQuery.ajaxSettings, s);
        var id = new Date().getTime()       
var form = jQuery.createUploadForm(id, s.fileElementId,s.data);
var io = jQuery.createUploadIframe(id, s.secureuri);
var frameId = 'jUploadFrame' + id;
var formId = 'jUploadForm' + id;
        // Watch for a new set of requests
        if ( s.global && ! jQuery.active++ )
{
jQuery.event.trigger( "ajaxStart" );
}           
        var requestDone = false;
        // Create the request object
        var xml = {}  
        if ( s.global )
            jQuery.event.trigger("ajaxSend", [xml, s]);
        // Wait for a response to come back
        var uploadCallback = function(isTimeout)
{
var io = document.getElementById(frameId);
            try
{ 
 if(io.contentWindow)
 {
 xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
  xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
 
 }else if(io.contentDocument)
 {
 xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
 xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
 }
            }catch(e)
{
 jQuery.handleError(s, xml, null, e);
}
            if ( xml || isTimeout == "timeout")
{ 
requestDone = true;
var status;
try {
    status = isTimeout != "timeout" ? "success" : "error";
    // Make sure that the request was successful or notmodified
    if ( status != "error" )
{
        // process the data (runs the xml through httpData regardless of callback)
        var data = jQuery.uploadHttpData( xml, s.dataType );   
        // If a local callback was specified, fire it and pass it the data
        if ( s.success )
            s.success( data, status );
   
        // Fire the global callback
        if( s.global )
            jQuery.event.trigger( "ajaxSuccess", [xml, s] );
    } else
        jQuery.handleError(s, xml, status);
} catch(e)
 {
    status = "error";
    jQuery.handleError(s, xml, status, e);
}

// The request was completed
if( s.global )
    jQuery.event.trigger( "ajaxComplete", [xml, s] );

// Handle the global AJAX counter
if ( s.global && ! --jQuery.active )
    jQuery.event.trigger( "ajaxStop" );

// Process result
if ( s.complete )
    s.complete(xml, status);

jQuery(io).unbind()

setTimeout(function()
{ try
 {
jQuery(io).remove();
jQuery(form).remove(); 

 } catch(e)
 {
jQuery.handleError(s, xml, null, e);
 }

}, 100)

xml = null

            }
        }
        // Timeout checker
        if ( s.timeout > 0 )
{
            setTimeout(function(){
// Check to see if the request is still happening
if( !requestDone ) uploadCallback( "timeout" );
            }, s.timeout);
        }
        try
{

var form = jQuery('#' + formId);
jQuery(form).attr('action', s.url);
jQuery(form).attr('method', 'POST');
jQuery(form).attr('target', frameId);
            if(form.encoding)
{
 jQuery(form).attr('encoding', 'multipart/form-data');     
            }
            else
{ 
 jQuery(form).attr('enctype', 'multipart/form-data');
            }
            jQuery(form).submit();

        } catch(e)
{
            jQuery.handleError(s, xml, null, e);
        }

jQuery('#' + frameId).load(uploadCallback );
        return {abort: function () {}}; 

    },

    uploadHttpData: function( r, type ) {
        var data = !type;
        data = type == "xml" || data ? r.responseXML : r.responseText;
        // If the type is "script", eval it in global context
        if ( type == "script" )
            jQuery.globalEval( data );
        // Get the JavaScript object, if JSON is used.
        if ( type == "json" )
            eval( "data = " + data );
        // evaluate scripts within html
        if ( type == "html" )
            jQuery("

").html(data).evalScripts();

        return data;
    }
})

过程：
(1 )前端文件的代码： test.php
 

代码示例:

 
 
 function ajaxFileUpload()
{
$.ajaxFileUpload
(
  {
 url:'doajaxfileupload.php', //你处理上传文件的服务端
 secureuri:false,
 fileElementId:'img',
 dataType: 'json',
 success: function (data)
 {
alert(data.file_infor);
 }
 }
 )
  return false;
  }
 
 

相应的HTML为：
 

代码示例:

  Upload
 

这样客户端就完成了。

(2) 在服务器端的doajaxfileupload.php
此处为了简便的检测是否真正的传值过来了，你可以将它存起来了。
 

代码示例:
$file_infor = var_export($_FILES,true);
 file_put_contents("d:file_infor.php".$file_infor);
 

这样打来刚生成的file_infor.php文件时，又看到了熟悉的信息了：
 

代码示例:
array(
 'name'=>'lamp.jpg',
 'type'=>'image/pjpeg',
 'tmp_name'=>'c:windowstempphpFA.tmp',
 'error'=>0,
 'size'=>3127
)
 

当然，真正的处理类于这样的：
 

代码示例:

方法二，利用iframe框架上传图片
html代码:
 

代码示例:

 
  
 
 
 

 

 

 

index.js文件：
 

代码示例:
$(function(){
 $("#upload_file").change(function(){
   $("#uploadFrom").submit();
 });
});
function stopSend(str){
 var im="";
 $("#msg").append(im);
}

upload.php文件：
 

代码示例:

    
 
 

您可能感兴趣的文章:

  • PHP异步执行技巧分享
  • php 异步请求文件实现多线程的代码
  • PHP异步执行模拟多线程的方法
  • PHP异步调用socket小例子
  • php 伪异步执行实现方法
  • PHP 异步框架 phpdaemon
  • PHP服务器端异步执行方法解析
  • PHP异步调用socket与php异步执行实例
  • PHP多线程异步请求的3种实现方法
  • 实现PHP多线程异步请求的3种方法
  • PHP的异步并行C扩展 swoole-server
  • PHP异步执行常用方式举例
  • PHP异步调用实现方式详解
  • php 异步调用方法实现示例
  • php+js实现异步图片上传实例分享
  • PHP异步执行实例解析
  • php使用fscok实现异步调用
  • php通过socket_bind()设置IP地址代码示例
  • php循环创建目录示例分享(php创建多级目录)
  • PHP获取php,mysql,apche的版本信息示例代码
  • php定义数组和使用示例(php数组的定义方法)
  • php输出奇数偶数示例
  • php递归示例 php递归函数代码
  • php生成数组的使用示例 php全组合算法
  • php分割数组示例
  • php数组随机排序示例
  • PHP 强制下载文件示例代码
  • php动态生成函数示例
  • php输入流php://input使用示例(php发送图片流到服务器)
  • php循环创建多级目录示例
  • php二维数组转换为字符串示例
    •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。












  • 相关文章推荐
  • 修改配置真正解决php文件上传大小限制问题(nginx+php)
  • PHP大文件上传问题解析 php大文件上传配置参考
  • 修改配置真正解决php文件上传大小限制问题(apache+php)
  • PHP上传文件过大$_FILES为空的解决方法
  • 如何修改PHP+Apache上传文件大小限制
  • PHP上传文件大小限制二种解决方法
  • php 上传问题
  • 如何突破php上传文件大小限制
  • apache+php上传大文件以上传100M为例
  • PHP 上传文件大小限制修改
  • PHP配置文件设置上传大文件
  • php无法上传大于8M文件解决方法
  • 美图秀秀web开放平台--PHP流式上传和表单上传示例分享
  • nginx:413 Request Entity Too Large的处理办法--修改 PHP上传文件大小
  • 修改PHP上传文件大小限制
  • 修改Nginx+PHP上传文件大小限制
  • apache+php上传文件大小限制修改方法
  • php设置允许大文件上传示例代码
  • linux系统中 apache+php 如何禁止将文件上传到某目录？
  • php大文件上传设置实例
  • php如何解决无法上传大于8M的文件问题
  • PHP 5.4.19 和 PHP 5.5.3 发布及下载地址
  • IIS7配置PHP图解(IIS7+PHP_5.2.17/PHP_5.3.5)
  • PHP去除html标签,php标记及css样式代码参考
  • PHP转换器 HipHop for PHP
  • PHP 'ext/soap/php_xml.c'不完整修复存在多个任意文件泄露漏洞
  • PHP配置文件设置上传大文件 iis7站长之家
  • php安装完成后如何添加mysql扩展
  • PHP的JavaScript框架 PHP.JS
  • PHP的substr() 函数用法
  • php服务器探针显示php服务器信息




    • 特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除！

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3