- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
- <scripttype="text/javascript"src="http://www.phpddt.com/usr/themes/dddefault/jquery-1.4.2.min.js"></script>
- <scripttype="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);
- }
- })
- returnfalse;
- })
- })
- </script>
- <body>
- <inputid="fileToUpload"type="file"size="20"name="fileToUpload"class="input">
- <buttonid="buttonUpload">上传</button>
- </body>
- </html>
主要参数说明:
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
上传返回字符串错误
在使用Structs的FileUpload组件进行上传文件的时候,在返回的JSon字符串里面总是莫名其妙的添加了<pre>标签,例如返回内容为"{\"message\":\"导入文件已成功\",\"result\":\"OK\"}",在浏览器里面就变成了"<pre style="word-wrap: break-word; white-space: pre-wrap;">"{\"message\":\"导入文件已成功\",\"result\":\"OK\"}"</pre>",这样就导致Ajax解析返回值的时候出现错误。
解决办法都是把response的返回类型设置为【text/html】。在Struts2中需要在Action的配置中这样设置。
<
result
name="success" type="json">
<
param
name="root">msg</
param
>
<
param
name="contentType">text/html;charset=UTF-8</
param
> //关键处,不配置则上传后返回字符串错误
</
result
>