AjaxFileUpload文件上传组件(php+jQuery+ajax)

前端之家收集整理的这篇文章主要介绍了AjaxFileUpload文件上传组件(php+jQuery+ajax)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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=======================

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>ajaxfileupload图片上传控件</title>
  6. </head>
  7. <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
  8. <script type="text/javascript" src="http://www.PHPletter.com/contents/ajaxfileupload/ajaxfileupload.js"></script>
  9. <script language="javascript">
  10. jQuery(function(){
  11. $("#buttonUpload").click(function(){
  12. //加载图标
  13. /* $("#loading").ajaxStart(function(){
  14. $(this).show();
  15. }).ajaxComplete(function(){
  16. $(this).hide();
  17. });*/
  18. //上传文件
  19. $.ajaxFileUpload({
  20. url:'upload.PHP',//处理图片脚本
  21. secureuri :false,fileElementId :'fileToUpload',//file控件id
  22. dataType : 'json',success : function (data,status){
  23. if(typeof(data.error) != 'undefined'){
  24. if(data.error != ''){
  25. alert(data.error);
  26. }else{
  27. alert(data.msg);
  28. }
  29. }
  30. },error: function(data,status,e){
  31. alert(e);
  32. }
  33. })
  34. return false;
  35. })
  36. })
  37. </script>
  38.  
  39.  
  40. <body>
  41. <input id="fileToUpload" type="file" size="20" name="fileToUpload" class="input">
  42. <button id="buttonUpload">上传</button>
  43. <!--<img id="loading" src="loading.jpg" style="display:none;">-->
  44. </body>
  45. </html>

=====================upload.PHP=======================

  1. $res["error"] = "";//错误信息
  2. $res["msg"] = "";//提示信息
  3. if(move_uploaded_file($_FILES['fileToUpload']['tmp_name'],"c:\\test.jpg")){
  4. $res["msg"] = "ok";
  5. }else{
  6. $res["error"] = "error";
  7. }
  8. echo json_encode($res);

猜你在找的Ajax相关文章