搜尋
首頁web前端js教程jQuery Ajax文件上传(php)_jquery

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

【PHP文件上传】

在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的。
实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上传处理函数来处理上传的文件。
而处理函数一般都是用PHP,JSP,ASP等服务端语言来实现的。那么如何通过WEB(HTTP协议来上传文件呢?)你需要类似于以下的HTML代码:
test.html

复制代码 代码如下:


Pictures:




注意:enctype="multipart/form-data",是必需的,它告诉FORM表这个是一文件上传类型,一旦这次请求成功后,文件就被上传到了服务器的临时文件夹中,
至于到达目的地后,文件将会被怎么样处理那就是PHP,JSP,ASP的事了。
(不过,你不要高兴的太早,如果该文件没有被移动到其它地方也没有被改名,则该文件将在表单请求结束时被删除。所以我们要写一个处理上传文件的脚本)
这里我们用PHP来处理
do_file_upload.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,如..document.getElementById('img').value或者jquery形式的$("#img")都是不能正真实际上传的(但是还是有很多人这样做,刚开始时我也是)。
可是功能上又要要求实现所谓的“异步上传”,怎么办呢??只能借助于第三方的组件,或者自己写一个(在网页里嵌入一个IFRAME)。但如果是考虑开发时间,那以用第三方的,这里有一个不错的jQuery的Ajax文件上传的组件,是“ajaxfileupload.js",其组件下载地址为:http://www.phpletter.com/,下载完毕里面有一个php的应用demo,很容易看懂的。
过程:
(1 )前端上文件的代码: test.php      

复制代码 代码如下:

   
   
   

相应的HTML为:

复制代码 代码如下:

       
       

这样客户端就完成了。

(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
         )


当然,真正的处理类于这样的:

复制代码 代码如下:

        $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/
陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
jquery实现多少秒后隐藏图片jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

axios与jquery的区别是什么axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

jquery怎么修改min-height样式jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

jquery怎么在body中增加元素jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM

增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

jquery中apply()方法怎么用jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM

在jquery中,apply()方法用于改变this指向,使用另一个对象替换当前对象,是应用某一对象的一个方法,语法为“apply(thisobj,[argarray])”;参数argarray表示的是以数组的形式进行传递。

jquery怎么删除div内所有子元素jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM

删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

jquery on()有几个参数jquery on()有几个参数Apr 21, 2022 am 11:29 AM

on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。

jquery怎么去掉只读属性jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),