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

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

文件上传的表单格式

<form id=\"uploadform\" enctype=\"multipart/form-data\" name=\"uploadform\" method=\"post\" >
  <input id=\"fileToUpload\" type=\"file\" name=\"fileToUpload\" class=\"uploadinput\" >
  <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\" class=\"input\">
   <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直接打印的方法检查各参数是否正确,比起上面这些无效的错误提示还是方便很多。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持免费资源网。

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容