常用的JQuery图像上传插件是Uploadify，效果不错。但是因为手机不支持flash，我们得另找一个文件上传插件使用。后来发现ajaxFileUpload是一个不错的插件，就用这个插件做了异步文件上传。关于使用ajaxFileUpload插件的文章也很多，但是我发现没有PHP版本，所以这次服务器端的处理使用了PHP语言。

1.详细解释ajaxFileUpload插件的语法参数。

原理：ajaxfileupload是通过监听iframe的onload方法实现的。从服务器处理后，触发iframe的onload事件调用其绑定方法，从绑定方法中获取服务器在iframe中返回的数据体(支持的普通文本、json、xml、脚本、html)。

语法：$。AJaxFileUpload([选项])。

其次，我们来看看如何使用它。

1.首先，介绍一下插件ajaxFileUpload。

Script src=' http : jquery-1 . 11 . 1 . js ' type=' text/JavaScript '/Script Script src=' http : ajaxfileupload . js ' type=' text/JavaScript '/Script在这里，我用的是jq1.11.1网上说jq版本要对应ajaxfile upload版本这样就不会有异常报错。不管怎样，我现在没有错误。

2.粘贴HTML代码。

div data-role=' field contain ' class=' upload-box ' Label for=' ID _ photos ' span class=' red ' */span您的有效ID photos:/Label type=' file ' ID=' ID _ photos ' name=' ID _ photos ' value=' upload ' style=' filter : alpha(不透明度=10)；-moz-opa city 336010；' opacity:10'/p style=' margin-top :0.5 em；color: # 999' font-size :11 pt；'注意：请上传手持证书的半身照片，并确保照片中的证书信息清晰可读。/p /div div class='id_photos' /div在这里，我主要指的是输入类型的代码=' file ' id=' id _ photos ' name=' id _ photos ' value='上传'，剩下的就不用担心了，因为我在手机这里，使用的是jqueryMobile插件。

3.转到js代码进行处理。

$(文档)。bind ('pageinit '，function(){//照片异步上传$ ('# id _ photos ')。change(function(){//此处使用了change事件。当选择并打开图片时，该事件在窗口关闭时触发。$.Ajax file upload({ URL : '/uploader/'，//处理图片的脚本路径type: 'post '，///提交方法secureuri :false，//是否启用fileelementd:' id _ photos '的安全提交，//文件控制iddatatype3360' JSON '，//服务器返回的数据类型为success3360function (data，status){//处理函数if(1！=data.total)返回；//因为这里表示允许上传单张图片，如果数字不是1，就是错误。var url=data.files[0]。路径；$('.id _ photos’)。empty()；//这里的效果是：一旦上传成功，就会返回json数据，其中包含url。取出url并将其分配给img标记，然后将其附加到。id_photos类来显示图片$('。id _ photos’)。追加(' img src=' http3360' URL ' '值URL ' '样式=。//$('.上传框')。移除()；}，错误：函数(数据，状态，e){//提交未能自动执行的处理函数警报(e)；} })});在这里，我基本上对每一行代码都写了注释，供大家理解。过程是将图片上传到uploader.php进行处理，处理成功后返回json数据，然后取出json中的url值，赋给img标签，再添加一个带有img标签的页面进行显示。

我在此附上json返回的数据：

{ 'total': 1，' success': 1，' files ' :[{ ' srcName ' : ' 3 . jpg '，' error': 0，' size': 10715，' type': 'image/jpeg '，Success' : true '，path ' : ' 3http://m . kellyblog.com/upload/20150528/857 F4 a3a

异步上传成功后HTML页面的效果是这样的：

4.看看PHP是如何处理的。

类上传控制器扩展了XXXX _控制器{公共函数索引(){ $ files=array()；$ success=0；//用户统计有多少张图片上传成功了foreach($ _ FILES as $ item){ $ index=count($ FILES)；$ files[$ index][' SRCname ']=$ item[' name ']；//上传图片的原名字$ files[$ index][' error ']=$ item[' error ']；//和该文件上传相关的错误代码$ files[$ index][' size ']=$ item[' size ']；//已上传文件的大小，单位为字节$ files[$ index][' type ']=$ item[' type ']；//文件的哑剧类型，需要浏览器提供该信息的支持，例如image/gif ' $ files[$ index][' success ']=false；//这个用于标志该图片是否上传成功$ files[$ index][' path ']=' '；//存图片路径//接收过程有没有错误if($item['error']！=0)继续；//判断图片能不能上传if(！is _ uploaded _ file($ item[' tmp _ name ']){ $ files[$ index][' error ']=8000；继续；} //扩展名$ extension=if(strcmp($ item[' type ']，' image/JPEG '==0){ $ extension=' .jpg '；} else if(strcmp($item['type']，' image/png')==0) { $extension=' .png '；} else if(strcmp($item['type']，' image/gif')==0) { $extension=' .gif '；} else { //如果类型不是以上三者，我们就从图片原名称里面去截取判断去取得（处于严谨性)$ substr=strchr($ item[' name ']，'。');if(FALSE==$ substr){ $ files[$ index][' error ']=8002；继续；} //取得元名字的扩展名后，再通过扩展名去给类型赋上对应的值if(str secmp($ substr，').jpg ')==0 | | str secmp($ substr，' .JPEG ')==0 | | str secmp($ substr，' .jif ')==0 | | str secmp($ substr，' .jpe ')==0){ $ files[$ index][' type ']=' image/JPEG '；} else if(str secmp($ substr，').png ')==0){ $ files[$ index][' type ']=' image/png '；} else if(str secmp($ substr，').gif ')==0){ $ files[$ index][' type ']=' image/gif '；} else { $ files[$ index][' error ']=8003；继续；} $ extension=$ substr} //对临时文件名加密，用于后面生成复杂的新文件名$ MD5=MD5 _ file($ item[' tmp _ name '])；//取得图片的大小$ imageInfo=getimagesize($ item[' tmp _ name '])；$ RawImageWidth=$ ImageInfo[0]；$ RawImageHeight=$ imageInfo[1]；//设置图片上传路径，放在上传文件夹，以年月日生成文件夹分类存储、//rtrim(base_url()、“/”)其实就是网站的根目录，大家自己处理$path=rtrim(base_url()，"/)./上传/' .日期(' Ymd ').'/';//确保目录可写确保_可写_ dir($ path)；//文件名$ name=' $ md5.0x { $ rawImageWidth } x { $ rawImageHeight } { $ extension } '；//加入图片文件没变化到，也就是存在，就不必重复上传了，不存在则上传$ ret=file _ exists($路径$name)？true : move _ uploaded _ file($ item[' tmp _ name ']，$serverPath .$ name)；if($ ret===false){ $ files[$ index][' error ']=8004；继续；} else { $ files[$ index][' path ']=$ path .$ name//存图片路径$ files[$ index][' success ']=true；//图片上传成功标志$ files[$ index][' width ']=$ rawImageWidth；//图片宽度$ files[$ index][' height ']=$ rawImageHeight；//图片高度$成功；//成功1 } } //将图片已json形式返回给射流研究…处理页面，这里大家可以改成自己的json返回处理代码echo JSON _ encode(array(' total '=count($ files)，' success'=$success，' files'=$files，}}/*********************************分割*************************************************///这里我附上确保_可写_目录()函数的代码/*** 确保文件夹存在并可写** @param字符串$ dir */函数确保_可写_dir($dir) { if(！file_exists($dir)) { mkdir($dir，0766，true)；chmod($dir，0766)；chmod($dir，0777)；} else if(！is _ writed($ dir)){ chmod($ dir，0766)；chmod($dir，0777)；if(！是_可写($ dir)){ 0引发新的文件系统异常('目录$dir不可写');} }}代码基本上都加上了注释，方便大家理解，虽然是用服务器端编程语言(专业超文本预处理器的缩写)处理图片上传，但你理解了上传时程序代码所处理的逻辑思路，将思路用于。网或者爪哇岛里都还是可以的。

更多精彩内容请参考主题《ajax上传技术汇总》、《javascript文件上传操作汇总》、《jQuery上传操作汇总》。

以上就是使用JQuery插件ajaxFileUpload异步上传文件的整个分析过程，希望对大家的学习有所帮助。