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


  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4. <title></title>

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

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

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

  8. </head>

  9. <script>

  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,

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

  23.        dataType : 'json',

  24.        success : function (data, status){

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

  26. if(data.error != ''){

  27.                    alert(data.error);

  28. }else{

  29.                    alert(data.msg);

  30. }

  31. }

  32. },

  33.        error: function(data, status, e){

  34.            alert(e);

  35. }

  36. })

  37. return false;

  38. })

  39. })

  40. </script>

  41. <body>

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

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

  44. </body>

  45. </html>


上传还可以传递参数:


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

  2.    $.ajaxFileUpload({

  3.        url: 'upload.php',

  4.        secureuri: false,

  5.        data: data,

  6.        fileElementId: 'fileToUpload',

  7.        dataType: 'json',

  8.        success: function (data) {

  9.            alert(data.msg);

  10.  

  11. },

  12.        error: function (data) {

  13.            alert("error");

  14. }

  15. });


主要参数说明:
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直接打印的方法检查各参数是否正确,比起上面这些无效的错误提示还是方便很多。
提供下下载: ajaxfileupload.rar