AjaxFileUpload文件上传组件(php+jQuery+ajax)
2013-04-26 22:12
731 查看
jQuery插件AjaxFileUpload可以实现ajax文件上传,下载地址:http://www.phpletter.com/contents/ajaxfileupload/ajaxfileupload.js
主要参数说明:
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直接打印的方法检查各参数是否正确,比起上面这些无效的错误提示还是方便很多。
示例代码:
=====================upload.html=======================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ajaxfileupload图片上传控件</title> </head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script> <script type="text/javascript" src="http://www.phpletter.com/contents/ajaxfileupload/ajaxfileupload.js"></script> <script language="javascript"> 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" class="input"> <button id="buttonUpload">上传</button> <!--<img id="loading" src="loading.jpg" style="display:none;">--> </body> </html>=====================upload.php=======================
$res["error"] = "";//错误信息 $res["msg"] = "";//提示信息 if(move_uploaded_file($_FILES['fileToUpload']['tmp_name'],"c:\\test.jpg")){ $res["msg"] = "ok"; }else{ $res["error"] = "error"; } echo json_encode($res);
相关文章推荐
- AjaxFileUpload文件上传组件(php+jQuery+ajax)
- PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
- 【转】JQuery插件ajaxFileUpload 异步上传文件(PHP版)
- php jquery之ajax上传文件 ajaxfileupload.js
- 【Html5】JQuery插件ajaxFileUpload 异步上传文件(PHP版)
- PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
- JQuery插件ajaxFileUpload 异步上传文件(PHP版)
- jQuery插件AjaxFileUpload实现ajax文件上传
- 一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子
- jQuery插件AjaxFileUpload可以实现ajax文件上传
- 带文件上传的form表单提交, jquery的ajaxfileupload+插件dropzone图文详解
- jQuery插件AjaxFileUpload实现ajax文件上传
- Asp.net MVC中使用JQuery插件ajaxFileUpload上传文件
- jquery ajaxFileUpload.js插件支持多文件上传的方法
- jQuery插件之ajaxFileUpload上传文件
- jQuery上传文件插件AjaxFileUpload的使用
- jQuery插件ajaxfileupload.js实现上传文件
- 如何用nodejs+jquery.ajaxfileupload.js实现文件上传功能
- 黄聪:一些文件上传组件(Flash,JQuery,asp,php,js,AJAX)
- ajaxfileupload 隐藏input file组件上传文件的两种实现