php如何实现上传文件显示上传进度百分比

php如何实现上传文件显示上传进度百分比,第1张

程序需要php的apc模块的支持,关键点就是在上传的form里添加一个hidden的inpu标签,里面要有name为

APC_UPLOAD_PROGRESS的属性,value值为一个随机数一遍多个人上传。

apc模块的安装方法是,下载php_apc.dll放到ext文件夹下,在php.ini文件里添加

upload_max_filesize =100M

apc.rfc1867 = on

apc.max_file_size = 100M

extension=php_apc.dll

然后测试配置是否成功:

if(apc_fetch)

{echo "apc is working"}

else{echo "apc is not supported!"}

Web Uploader

这个插件是百度出的,有进度条,兼容ie7及以上。

原理就是ajax上传,会返回1-100的数值,根据这个值来 *** 作进度条。如果还有不明白的话,你可以在后盾人看看视频找找答案,有空多看看时间长了,慢慢就明白了,希望能帮到你,给个采纳吧谢谢

因为上述 *** 作包含了上传文件的 *** 作,而普通ajax无法实现文件上传,经过百度有使用FormData对象与插件这两种方法,详见前一篇转载的博文,于是我就尝试了一下FormData对象的方法。

情景:我要利用thinkPHP3.2.3框架实现增加商品时对其输入数据合法性的验证之后到前台提示,一开始是通过内置的跳转函数实现的跳转提示,会跳到一个页面显示再返回,这样给人的视觉体验很不好,于是想修改为ajax方式来实现异步更新数据而不刷新此页面,也不离开此页面,而是通过alertd出警告框来提示用户输入数据的合法性与否。因为商品的表单数据中包含文件,所以一开始使用ajax时使用jquery内置的收集数据的方法:$("form").serialize()但是它不支持文件数据的收集,于是百度后就尝试使用FormData加上ajax来实现表单的异步提交并实现文件的上传。

首先在控制器就要修改执行成功或失败时的跳转函数,如

$this->success('添加成功!',U('listGoods'),true)

$this->error('添加失败!',U('add'),true)

细心的同学应该发现了跟以前写的有不同之处吧,就是多给了一个参数,默认是false,设置为true时表明表单是使用ajax提交的,从而不执行跳转,而是返回json格式的数据如下:

{"info":"\u6dfb\u52a0\u6210\u529f\uff01","status":1,"url":"\/shop\/index.php\/Admin\/Goods\/listGoods.html"}

{"info":"\u6dfb\u52a0\u6210\u529f\uff01","status":0,"url":"\/shop\/index.php\/Admin\/Goods\/listGoods.html"}

这样就可以在前台的ajax执行的success回调函数内部获取数据,status=1表示成功,status=0表示失败。

一开始使用的方法代码如下:

function testAjax(){

var formData = new FormData(document.getElementById("addForm"))

$.ajax({

url:"__SELF__",

type:"post",

data:formData,

dataType: 'json',

processData:false,// 告诉jQuery不要去处理发送的数据

contentType:false,// 告诉jQuery不要去设置Content-Type请求头

success:function(data){

window.clearInterval(timer)

console.log("over...")

//判断是否添加成功

if(data.status == 1){

alert(data.info)

location.href = data.url

}

else{

alert(data)

}

},

error:function(e){

alert("错误")

window.clearInterval(timer)

}

})

get()//此处为上传文件的进度条

}

正常情况下是不跳转的,但是我猜应该是使用了FormData对象的缘故,导致ajax执行回调函数后,一直自行跳到一个空白界面显 示返回的json格式的提示信息。这样的效果显然不是我要的,于是就开始测试,看到底是哪里出错了,最后发现确实没法控制它, 正一筹莫展时突然发现现在使用的是绑定了提交按钮的onclick事件,我猜会不会是这个原因,反正改一下也没关系,于是将其改成 限制通过按钮提交表单的方法来实现果然不自行跳转了,真的激动啊!!这时明白最关键原因应该跟FormData无关了,其实就是提 交方式的原因导致的。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/11442434.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-16
下一篇 2023-05-16

发表评论

登录后才能评论

评论列表(0条)

保存