专栏首页鹿苑php+ajax实现无刷新文件上传功能(ajaxuploadfile)

php+ajax实现无刷新文件上传功能(ajaxuploadfile)

本文实例为大家分享了php+ajax实现无刷新文件上传的具体代码,供大家参考,具体内容如下

文件上传的表单格式

<form id="uploadform" enctype="multipart/form-data" name="uploadform" method="post" >

<input id="fileToUpload" type="file" name="fileToUpload" >

<input id="add_file" type="button" value="提交">

</form>

AjaxFileUpload实现文件异步上传效果更好,使用简单:

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="http://www.phpddt.com/usr/themes/dddefault/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="ajaxfileupload.js"></script>

</head>

<script>

jQuery(function(){

$("#buttonUpload").click(function(){

//加载图标

/* $("#loading").ajaxStart(function(){

$(this).show();

}).ajaxComplete(function(){

$(this).hide();

});*/

//上传文件

$.ajaxFileUpload({

url:'upload.php',//处理图片脚本

secureuri :false,

fileElementId :'fileToUpload',//file控件id

dataType : 'json',

success : function (data, status){

if(typeof(data.error) != 'undefined'){

if(data.error != ''){

alert(data.error);

}else{

alert(data.msg);

}

}

},

error: function(data, status, e){

alert(e);

}

})

return false;

})

})

</script>

<body>

<input id="fileToUpload" type="file" size="20" name="fileToUpload" >

<button id="buttonUpload">上传</button>

</body>

</html>

上传还可以传递参数:

var data = { name: 'my name', description: 'short description' }/

/

$.ajaxFileUpload({

url: 'upload.php',

secureuri: false,

data: data,

fileElementId: 'fileToUpload',

dataType: 'json',

success: function (data) {

alert(data.msg);

},

error: function (data) {

alert("error");

}

});

主要参数说明:

1、url表示处理文件上传操作的文件路径,可以测试URL是否能在浏览器中直接访问,如上:upload.php

2、fileElementId表示文件域ID,如上:fileToUpload

3、secureuri是否启用安全提交,默认为false

4、dataType数据数据,一般选json,javascript的原生态

5、success提交成功后处理函数

6、error提交失败处理函数

需要了解相关的错误提示

1、SyntaxError: missing ; before statement错误

如果出现这个错误就需要检查url路径是否可以访问

2,SyntaxError: syntax error错误

如果出现这个错误就需要检查处理提交操作的PHP文件是否存在语法错误

3、SyntaxError: invalid property id错误

如果出现这个错误就需要检查属性ID是否存在

4、SyntaxError: missing } in XML expression错误

如果出现这个错误就需要检查文件域名称是否一致或不存在

5、其它自定义错误

大家可使用变量$error直接打印的方法检查各参数是否正确,比起上面这些无效的错误提示还是方便很多。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支/

/持。

原文链接:https://www.blog.17ti.com/php/4009.html

我来说两句

0 条评论
登录 后参与评论

相关文章

  • php+ajax实现文件切割上传功能示例

    本文实例讲述了php+ajax实现文件切割上传功能。分享给大家供大家参考,具体如下:

    砸漏
  • PHP使用HTML5 FileApi实现Ajax上传文件功能示例

    本文实例讲述了PHP使用HTML5 FileApi实现Ajax上传文件功能。分享给大家供大家参考,具体如下:

    砸漏
  • PHP实现带进度条的Ajax文件上传功能示例

    本文实例讲述了PHP实现带进度条的Ajax文件上传功能。分享给大家供大家参考,具体如下:

    砸漏
  • php+js实现的无刷新下载文件功能示例

    本文实例讲述了php+js实现的无刷新下载文件功能。分享给大家供大家参考,具体如下:

    砸漏
  • 简单实现php上传文件功能

    本文实例为大家分享了php上传文件功能的具体代码,供大家参考,具体内容如下 html:

    用户2323866
  • PHP+iframe模拟Ajax上传文件功能示例

    本文实例讲述了PHP+iframe模拟Ajax上传文件功能。分享给大家供大家参考,具体如下:

    砸漏
  • MVC5:使用Ajax和HTML5实现文件上传功能

    引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能...

    葡萄城控件
  • PHP怎么实现文件上传的功能

    文件上传功能是项目中常用到的功能,可以上传几乎所有的文件。在这里,我们以上传图片举例。

    素浅
  • php+iframe 实现上传文件功能示例

    本文实例讲述了php+iframe 实现上传文件功能。分享给大家供大家参考,具体如下:

    砸漏
  • PHP实现文件上传功能实例代码

    以上所述是小编给大家介绍的PHP实现文件上传功能实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对百搜论坛的...

    PHP开发工程师
  • ThinkPHP5.1+Ajax实现的无刷新分页功能示例

    本文实例讲述了ThinkPHP5.1+Ajax实现的无刷新分页功能。分享给大家供大家参考,具体如下:

    砸漏
  • 利用laravel+ajax实现文件上传功能方法示例

    前言 大家都知道,早期的XMLHttpRequest不支持文件上传,一般用第三方js插件或者flash,现在可以借助XMLHttpRequest Level 2...

    用户2323866
  • servlet实现文件上传功能

    最新通知 ●回复"每日一练"获取以前的题目! ●【新】Android视频更新了!(回复【安卓视频】获取下载链接) ●【新】Ajax知识点视频更新了!(回复【学习...

    Java学习
  • Laravel 文件上传功能实现

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

    泥豆芽儿 MT
  • 《大胖 • 小课》- 不用 js 实现文件无刷新上传

    上一节,我们实现了一个简单的文件上传接口,服务端的文件保存我们使用koa-body来完成。

    zz_jesse
  • php+jQuery ajax实现的实时刷新显示数据功能示例

    本文实例讲述了php+jQuery ajax实现的实时刷新显示数据功能。分享给大家供大家参考,具体如下:

    砸漏
  • 后端:Layui实现文件上传功能

    今天给大家分享采用AspNet MVC+前端框架LayUi实现文件上传功能,感兴趣的朋友可以学习一下。

    全栈程序员站长
  • 文件上传的动作不能太俗,必须页面无刷新上传

    常规操作上传文件 1 <form action="xxx.action" method="post" enctype="multipart/form-data...

    赵小忠
  • tp5框架基于Ajax实现列表无刷新排序功能示例

    本文实例讲述了tp5框架基于Ajax实现列表无刷新排序功能。分享给大家供大家参考,具体如下:

    砸漏

扫码关注云+社区

领取腾讯云代金券