jQuery php即时上传ajax文件详解

很多项目需要使用即时上传的功能，比如选择本地图片后，立即上传并显示图片。本文解释了如何使用jQuery和PHP即时上传文件。用户只需选择本地图片确认上传，并显示上传进度条。上传完成后，显示图片信息。

这个HTML示例基于jquery和优秀的jquery.form插件。因此，首先加载jQuery库和表单插件。Script type=' text/JavaScript ' src=' http : jquery . min . js '/Script Script type=' text/JavaScript ' src=' http : jquery . form . js '/Script然后将以下代码添加到页面中：按如下方式复制代码： Div class=' BTN ' span add attachment/span input id=' file upload ' type=' file ' name=' mypic '/Div class=' progress ' span class=' bar '/btn在html中添加附件。以及进度条。进步，进步。显示文件信息的文件和显示图片的#showimg，可以看到表单表单表单并没有出现在上传文件的html中，正常的上传功能依赖于表单表单表单。我们的表单表单是动态插入的，可以避免大表单中出现多个表单。使用CSS，我们可以将传统的浏览文件的表单控件美化成一个按钮。这看起来酷吗？

复制代码代码如下：BTN {位置：相对；飞越：隐藏；右边距： 4px显示：内嵌块；* display : inlinepadding :4 px 10px 4px font-size :14 px；行高：18 px*线高：20 pxcolor: # fff文本对齐：居中；垂直对齐：毫米；光标：指针指针；背景技术# 5bb75bborder:1px固体# ccccccborder-color : # e6e 6 # e6e 6 # bfbfbf；边框-底部-颜色： # b3b 3；-网络套件-边框-半径：4 px-moz-边界-半径：4 px边界半径：4 px} .btn输入{位置：绝对值；top : 0；右： 0；保证金： 0；border:solid固体透明；opa城市3360 0；filter:alpha(不透明度=0);光标：指针；} .进度{位置：相对；左边距左侧：100像素边距-top :-24px；宽度宽度：200pxpadding: 1px边界半径：3 pxdisplay:none} .条形{背景-颜色：绿色；显示：块；宽度：0%;高度：20 px边界半径：3 px} .百分比{ position:absolute绝对值高度：20 px显示：内嵌块；top:3px左侧：2%;color:#fff } .文件{ height:22px线高：22 px余量margin:10px 0 } .delimg { margin-left :20 px；color : # 090 cursor : pointer } jQuery首先定义各种变量，注意动态将表单元素形式插入到上传按钮部位，并且形式的属性enctype必须设置为：多部分/表单数据。然后当点击"上传附件"按钮，选择要上传的文件后，调用jquery.form插件的ajaxSubmit方法，如下代码说明。复制代码代码如下：$(function () { var bar=$(').bar’)；var百分比=$(' .百分比');var show img=$(' # show img ')；var进度=$(' .进步');定义变量文件=$('。文件');var btn=$(' .BTN斯潘)；$('#fileupload ').包装('表单id='我的上传'操作='操作。' PHP '方法=' post ' enctype=' multipart/form-data '/form ')；$('#fileupload ').change(function(){ //选择文件$('#myupload ').ajaxSubmit({ dataType: 'json '，//数据格式为json beforeSend:函数(){ //开始上传显示img。empty()；//清空显示的图片进步。show()；//显示进度条var percentVal=' 0% '；//开始进度为0% bar.width(百分比值);//进度条的宽度percent.html(百分比值);//显示进度为0% btn.html('上传中.');//上传按钮显示上传中}，uploadProgress:函数（事件、位置、总计、百分比完成){ var percentVal=percent complete " % "；//获得进度bar.width(百分比值);//上传进度条宽度变宽percent.html(百分比值);//显示上传进度百分比}，成功：函数（数据){ //成功//获得后台返回的json数据，显示文件名，大小，以及删除按钮文件。html(“”数据。名称'('数据。size ' k)span class=' delimg ' rel=' data。pic“”删除/span’)；//显示上传后的图片var img=' http://演示。helloweba。com/upload/files/'数据。pic显示img。html(' img src=' img ' ')；' btn.html('添加附件');//上传按钮还原}，error:function(xhr){ //上传失败' btn.html('上传失败');酒吧。宽度(' 0 ')；文件。html(xhr。response text)；//返回失败信息} });});});关于jquery.form插件的更多信息，请参阅形式插件官网：http://malsup.com/jquery/form/，官网中详细介绍了形式插件的应用程序接口和各种选项设置以及示例。接下来，文件上传完成，如果用户想删除上传的文件，可以写个阿贾克斯邮报请求来完成删除操作。复制代码代码如下： $(函数(){ 0.接上面的代码$('.交付').live('click '，function(){ var pic=$(this).attr(' rel ')；$.post('action.php？act=delimg '，{imagename:pic}，function(msg){ if(msg==1){ files。html(“”删除成功.');显示img。empty()；//清空图片进步。hide()；//隐藏进度条} else { alert(msg)；} });});});PHPaction.php中需要处理图片上传以及删除图片。图片上传时需要验证格式和大小，然后通过移动上传的文件()方法上传图片，最后返回json格式的数据。删除图片时使用取消链接()即可完成删除操作。

复制代码如下： $ action=$ _ GET[' act ']；If($action=='delimg'){ //删除图片$ filename=$ _ POST[' imagename ']；if(！空($filename)){ unlink('files/')。$ filename)；回声“1”；}else{ echo '删除失败。} }else{ //上传图片$ picname=$ _ files[' my pic '][' name ']；$ picsize=$ _ FILES[' my pic '][' size ']；if ($picname！='') {if ($picsize 512000) {//限制上传大小echo '图片大小不能超过500k '；退出；} $ type=strtr($ pic name，'.');//如果($type！='.gif' $type！='.jpg') {echo '图片格式错误！退出；} $rand=rand(100，999)；$pics=日期(' YmdHis ')。$兰特。$ type//图片名称//上传路径$pic_path='files/'。$ picsmove _ uploaded _ file($ _ FILES[' my pic '][' tmp _ name ']，$ pic _ path)；} $size=round($picsize/1024，2)；//转换为KB $ arr=数组(' name'=$ picname，' pic'=$ pics，' size '=$ size)；echo JSON _ encode($ arr)；//输出json数据}本文利用jquery表单插件完成单个文件的上传功能。在flash中，目前可以使用很多优秀的上传插件，包括基于flash的插件和基于jquery的插件。典型的是jQuery文件上传。该插件支持多文件上传、拖放上传等。感兴趣的同学可以先了解一下。