jquery 上传图片

来源：互联网发布：软件设计师考试报名费编辑：程序博客网时间：2024/04/30 22:52

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

0 0