jQuery Ajax文件上传(php)


Posted in Javascript onJune 16, 2009

如何实现jQuery的Ajax文件上传,PHP如实文件上传.
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{
  );
   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:/";
     );
   if($ok === FALSE){
    echo json_encode('file_infor'=>'上传失败');
   }else{
    echo json_encode('file_infor'=>'上传成功');
   }
   ?>   

另注:实际上,你可以在一个页面里嵌入一个IFRAME,然后在IFRAME使用原生的POST表单提交.JQUERY的这个插件也是采用了这种方式。只不过它是动态生成的IFRAME 与表单

原文: http://fc-lamp.blog.163.com/blog/static/1745666872009519310153/

Javascript 相关文章推荐
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 Javascript
javascript真的不难-回顾一下基础知识
Jan 15 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
浅谈ES6新增的数组方法和对象
Aug 08 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 Javascript
JavaScript canvas基于数组生成柱状图代码实例
Mar 06 Javascript
JavaScript 高级语法介绍
Jun 15 #Javascript
JavaScript 撑出页面文字换行
Jun 15 #Javascript
jquery.alert 弹出式复选框实现代码
Jun 15 #Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 #Javascript
FireFox JavaScript全局Event对象
Jun 14 #Javascript
Javascript 错误处理的几种方法
Jun 13 #Javascript
Javascript 学习书 推荐
Jun 13 #Javascript
You might like
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
PHP中比较时间大小实例
2014/08/21 PHP
php实现的简单检验登陆类
2015/06/18 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
vue表单自定义校验规则介绍
2018/08/28 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
nodejs微信开发之授权登录+获取用户信息
2019/03/17 NodeJs
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
Python函数参数类型*、**的区别
2015/04/11 Python
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
python 实现的车牌识别项目
2021/01/25 Python
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
关于毕业的广播稿
2014/01/10 职场文书
建筑工程毕业生自我鉴定
2014/01/14 职场文书
汉语言文学职业规划
2014/02/14 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
小学教师寄语大全
2014/04/03 职场文书
2014财务年度工作总结
2014/11/11 职场文书
手写实现JS中的new
2021/11/07 Javascript
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL