`

如何实现jQuery的Ajax文件上传,PHP如实文件上传

阅读更多
PHP文件上传】

在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的。
实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上传处理函数来处理上传的文件。
而处理函数一般都是用PHP,JSP,ASP等服务端语言来实现的。那么如何通过WEB(HTTP协议来上传文件呢?)你需要类似于以下的HTML代码:
test.html
<form action="do_file_upload.php" method="post" enctype="multipart/form-data">
<p>Pictures:
<input type="file" name="picture" />
<input type="submit" value="Send" />
</p>
</form>
注意:enctype="multipart/form-data",是必需的,它告诉FORM表这个是一文件上传类型,一旦这次请求成功后,文件就被上传到了服务器的临时文件夹中,
至于到达目的地后,文件将会被怎么样处理那就是PHP,JSP,ASP的事了。
(不过,你不要高兴的太早,如果该文件没有被移动到其它地方也没有被改名,则该文件将在表单请求结束时被删除。所以我们要写一个处理上传文件的脚本)
这里我们用PHP来处理
do_file_upload.php
<?php
$error = ""; //上传文件出错信息
$msg = "";
$fileElementName = 'picture';
    $allowType = array(".jpg",".gif",".png"); //允许上传的文件类型
    $num      = strrpos($_FILES['picture']['name'] ,'.'); 
$fileSuffixName    = substr($_FILES['picture']['name'],$num,8);//此数可变 
$fileSuffixName    = strtolower($fileSuffixName); //确定上传文件的类型
   
$upFilePath             = 'd:/'; //最终存放路径

if(!empty($_FILES[$fileElementName]['error']))
{
   switch($_FILES[$fileElementName]['error'])
   {

    case '1':
     $error = '传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值';
     break;
    case '2':
     $error = '上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值';
     break;
    case '3':
     $error = '文件只有部分被上传';
     break;
    case '4':
     $error = '没有文件被上传';
     break;

    case '6':
     $error = '找不到临时文件夹';
     break;
    case '7':
     $error = '文件写入失败';
     break;
    default:
     $error = '未知错误';
   }
}elseif(empty($_FILES['fileToUpload']['tmp_name']) || $_FILES['fileToUpload']['tmp_name'] == 'none')
{
   $error = '没有上传文件.';
}else if(!in_array($fileSuffixName,$allowType))
{
   $error = '不允许上传的文件类型';
}else{
  $ok=@move_uploaded_file($_FILES['fileToUpload']['tmp_name'],$upFilePath);
   if($ok === FALSE){
    $error = '上传失败';
   }
}
?>


另注:关于$_FILES数组
此数组包含有所有上传的文件信息,即记录下了上传文件时的相关信息。
以上范例中 $_FILES 数组的内容如下所示。我们假设文件上传字段的名称如上例所示,为 userfile。名称可随意命名。

$_FILES['userfile']['name']
客户端机器文件的原名称。

$_FILES['userfile']['type']
文件的 MIME 类型,如果浏览器提供此信息的话。一个例子是“image/gif”。不过此 MIME 类型在 PHP 端并不检查,因此不要想当然认为有这个值。

$_FILES['userfile']['size']
已上传文件的大小,单位为字节。

$_FILES['userfile']['tmp_name']
文件被上传后在服务端储存的临时文件名。

$_FILES['userfile']['error']
和该文件上传相关的错误代码。此项目是在 PHP 4.2.0 版本中增加的。


【AJAX文件上传】

其实就是实现无刷新式的文件上传。可采用IFRAME文件上传原理。
实际上在用PHP上传文件时。。。只能用$_FILES形式,但是若我们只是单一的用JS方式取其ID,如<input id='img' type='file'>..document.getElementById('img').value或者jquery形式的$("#img")都是不能正真实际上传的(但是还是有很多人这样做,刚开始时我也是)。
可是功能上又要要求实现所谓的“异步上传”,怎么办呢??只能借助于第三方的组件,或者自己写一个(在网页里嵌入一个IFRAME)。但如果是考虑开发时间,那以用第三方的,这里有一个不错的jQuery的Ajax文件上传的组件,是“ajaxfileupload.js",其组件下载地址为:http://www.phpletter.com/,下载完毕里面有一个php的应用demo,很容易看懂的。
过程:
(1 )前端上文件的代码: test.php       

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="ajaxfileupload.js"></script>
    <script type="text/javascript">
       function ajaxFileUpload()
               {
                  $.ajaxFileUpload
                     (
                       {
                            url:'doajaxfileupload.php', //你处理上传文件的服务端
                            secureuri:false,
                            fileElementId:'img',
                            dataType: 'json',
                            success: function (data)
                                  {
                                    alert(data.file_infor);
                                  }
                               }
                         )

                       return false;
                 }
     </script>
相应的HTML为:
        <input id="img" type="file" size="45" name="img" class="input">
        <button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>

这样客户端就完成了。
        
(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:\windows\temp\phpFA.tmp',
             'error'=>0,
             'size'=>3127
         )
当然,真正的处理类于这样的:
   <?php
     $upFilePath = "d:/";
     $ok=@move_uploaded_file($_FILES['img']['tmp_name'],$upFilePath);
   if($ok === FALSE){
    echo json_encode('file_infor'=>'上传失败');
   }else{
    echo json_encode('file_infor'=>'上传成功');
   }
   ?>   
另注:实际上,你可以在一个页面里嵌入一个IFRAME,然后在IFRAME使用原生的POST表单提交.JQUERY的这个插件也是采用了这种方式。只不过它是动态生成的IFRAME 与表单
本文来自
http://hi.baidu.com/fc_lamp/blog/item/ca86edc6b508e9d5d10060ed.html
分享到:
评论

相关推荐

    jQuery+php实现ajax文件即时上传

    在文件上传场景下,Ajax可以实现文件的后台传输,用户在选择文件后即可看到上传进度,无需等待整个文件上传完成才显示结果。 3. **PHP**:PHP是一种开源的服务器端脚本语言,常用于Web开发,可以处理各种HTTP请求,...

    jquery实现ajax上传文件asp.net版

    在ASP.NET环境中,使用jQuery和Ajax来实现文件上传是一种常见的技术方案,它可以提供无刷新的用户体验,提升网站的交互性。下面将详细讲解这个过程涉及的关键知识点。 首先,我们需要了解jQuery库。jQuery是一个轻...

    PHP多文件上传插件,PHP+jQuery+Ajax多图片上传

    总的来说,PHP+jQuery+Ajax多图片上传插件是构建高效、易用的文件上传功能的理想选择。它通过分离前后端任务,实现了无刷新的用户体验,同时利用Ajax提供了流畅的进度反馈。在实际开发中,开发者可以根据项目需求...

    ajax+jquery+ashx实现上传文件

    现在,我们来详细探讨如何利用这些技术实现文件上传功能。 首先,我们需要创建一个HTML表单,用户可以通过这个表单选择文件进行上传。表单通常包含一个`&lt;input&gt;`元素,其`type`属性设置为`file`,以便用户能够选择...

    jquery实现的ajax文件上传功能

    jquery实现的ajax文件上传功能 $.ajaxFileUpload ( { url:'doajaxfileupload.php', secureuri:false, fileElementId:'fileToUpload', dataType: 'json', success: function (data, ...

    PHP + jQuery实现ajax文件即时上传 预览 配套资源

    在本文中,我们将深入探讨如何使用PHP和jQuery的Ajax技术实现文件即时上传和预览功能。这个主题主要涉及JavaScript库jQuery、jQuery Form Plugin以及PHP后端处理,这些都是现代Web开发中不可或缺的部分。以下是对每...

    jquery+ajax文件上传

    本主题将深入探讨如何使用jQuery与AJAX技术实现文件上传,同时还能传递其他表单参数,以提高用户体验和数据处理的灵活性。 首先,jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax...

    struts2+jquery+ajax文件异步上传

    Struts2、jQuery和Ajax是Web开发中的三个关键组件,它们共同构成了文件异步上传的基础框架。这个项目是在MyEclipse环境下实现的一个简单的文件上传功能,让我们深入了解一下这些技术及其在文件上传中的应用。 首先...

    ajax+jquery实现文件上传(详细注释)

    以上就是使用Ajax和jQuery实现文件上传的基本步骤。在实际应用中,可能还需要考虑文件大小限制、错误处理、进度显示等更多细节。记得在开发过程中保持代码的可维护性和安全性,例如使用HTTPS防止数据被窃取,以及对...

    用jquery实现ajax上传文件php版.zip

    `ajaxfileupload.js`是实现文件上传功能的JavaScript插件,它扩展了jQuery的功能,提供了一个接口来处理文件上传。这个插件通常会监听用户选择文件后触发的事件,然后使用XMLHttpRequest对象通过AJAX方式向服务器...

    php upload文件上传代码 jquery ajax无刷新

    "php upload文件上传代码 jquery ajax无刷新"这个主题涵盖了如何利用这些技术实现文件上传,同时保持页面的无刷新特性。让我们深入探讨一下这个过程。 首先,我们要明白文件上传的基本原理。在HTML中,`...

    jQuery实现文件编码成base64并通过AJAX上传的方法

    本文实例讲述了jQuery实现文件编码成base64并通过AJAX上传的方法。分享给大家供大家参考,具体如下: 使用AJAX是无法直接上传文件的,一般都是新建个iframe在它里面完成表单提交的过程以达到异步上传文件的效果。 ...

    jquery+ajax实现文件上传的js

    本文将深入探讨如何利用jQuery和AJAX实现文件上传,并重点介绍`ajaxfileupload.js`这个jQuery插件。 首先,jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理和Ajax交互等任务。而AJAX(Asynchronous ...

    Jquery AjaxUpload实现文件上传实例 PHP版

    在这个“Jquery AjaxUpload实现文件上传实例 PHP版”中,我们将探讨如何使用jQuery的AjaxUpload插件与PHP后端进行配合,实现实时的文件上传功能。 首先,我们需要在HTML页面中创建一个用于选择文件的input元素和一...

    JQuery实现ajax上传文件示例源码

    本示例将深入探讨如何使用jQuery实现AJAX文件上传功能。AJAX(Asynchronous JavaScript and XML)允许我们在不刷新整个页面的情况下与服务器进行异步通信,极大地提升了用户体验。 一、jQuery与Ajax基础 jQuery...

    ajax+jquery文件批量上传.doc

    ### IT知识点:使用Ajax与jQuery实现文件批量上传 在现代Web开发中,文件批量上传是一项常见且实用的功能,尤其在用户需要一次性上传多个文件(如图片、文档等)的场景中。本文将深入探讨如何利用Ajax与jQuery技术...

    Jquery异步上传 ajax上传 php异步上传

    本篇文章将深入探讨如何使用jQuery、Ajax以及PHP实现异步文件上传,以实现无刷新页面的交互效果。 首先,jQuery是一个轻量级、功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在...

    在Web API中使用jQuery AJAX实现文件上传的例子

    本教程将详细介绍如何在ASP.NET Web API中结合jQuery的AJAX方法实现文件上传。 首先,我们需要在客户端创建一个HTML表单,用于用户选择要上传的文件。HTML表单通常包含一个`&lt;input type="file"&gt;`元素,用户可以通过...

    jQuery+php实现ajax文件上传 For ASP

    本教程将探讨如何利用jQuery和PHP实现一个AJAX文件上传功能,适用于ASP平台。以下是相关知识点的详细说明: 1. **jQuery**: jQuery是一个流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互。在...

    jquery ajax上传文件

    为了解决这些问题,jQuery提供了一种基于AJAX的文件上传方式,通过XMLHttpRequest Level 2(XHR2)的FormData接口实现。本篇文章将详细介绍如何使用jQuery AJAX进行文件上传。 首先,我们需要了解`ajaxupload.js`这...

Global site tag (gtag.js) - Google Analytics