AJAXBloger 2011-08-01
jQuery插件介绍—AjaxFileUpload实现ajax
jQuery插件AjaxFileUpload可以实现ajax文件上传,该插件使用非常简单,首先了解一下正确使用AjaxFileUpload插件的方法,然后再了解一些常见的错误信息和解决方法。使用说明需要使用jQuery
jQuery插件AjaxFileUpload可以实现ajax文件上传,该插件使用非常简单,首先了解一下正确使用AjaxFileUpload插件的方法,然后再了解一些常见的错误信息和解决方法。
使用说明
需要使用jQuery库文件和AjaxFileUpload库文件
使用实例
http://www.phpletter.com/contents/ajaxfileupload/ajaxfileupload.js
一,包含文件部分
<scripttype=”text/javascript”src=”jquery.js”></script>
<scripttype=”text/javascript”src=”ajaxfileupload.js”></script>
二,HTML部分
<imgid=”loading”src=”loading.gif”style=”display:none;”>
<inputid=”fileToUpload”type=”file”size=”20″name=”fileToUpload”class=”input”>
<buttonclass=”button”id=”buttonUpload”onclick=”returnajaxFileUpload();”>上传</button>
只需要三个元素,一个动态加载小图标、一个文件域和一个按钮
注意:使用AjaxFileUpload插件上传文件可不需要form,如下:[b][/b]
<formname=”form”action=”"method=”POST”enctype=”multipart/form-data”>
……相关html代码……
</form>
因为AjaxFileUpload插件会自动生成一个form提交表单。
对于file文件域ID和name,ajaxFileUpload插件fileElementId参数需要获取文件域ID,如果处理上传文件操作就需要知道文件域name,以便获取上传文件信息,这两者关系一定要清楚。
三,javascript部分
<scripttype=”text/javascript”>
functionajaxFileUpload(){
loading();//动态加载小图标
$.ajaxFileUpload({
url:’upload.php’,
secureuri:false,
fileElementId:’fileToUpload’,
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;
}
functionloading(){
$(“#loading“).ajaxStart(function(){
$(this).show();
}).ajaxComplete(function(){
$(this).hide();
});
}
</script>
主要参数说明:
1,url表示处理文件上传操作的文件路径,可以测试URL是否能在浏览器中直接访问,如上:upload.php
2,fileElementId表示文件域ID,如上:fileToUpload
3,secureuri是否启用安全提交,默认为false
4,dataType数据数据,一般选json,javascript的原生态
5,success提交成功后处理函数
6,error提交失败处理函数
上面有两个方法,一个动态加载小图标提示函数loading()和ajaxFileUpload文件上传$.ajaxFileUpload()函数,这与我们使用jQuery.ajax()函数差不多,使用很简单,这里我省略了PHP处理上传文件,使用jQuery插件AjaxFileUpload实现ajax文件就这么简单。
同时我们需要了解相关的错误提示
1,SyntaxError:missing;beforestatement错误
如果出现这个错误就需要检查url路径是否可以访问
2,SyntaxError:syntaxerror错误
如果出现这个错误就需要检查处理提交操作的PHP文件是否存在语法错误
3,SyntaxError:invalidpropertyid错误
如果出现这个错误就需要检查属性ID是否存在
4,SyntaxError:missing}inXMLexpression错误
如果出现这个错误就需要检查文件域名称是否一致或不存在
5,其它自定义错误
大家可使用变量$error直接打印的方法检查各参数是否正确,比起上面这些无效的错误提示还是方便很多。
使用jQuery插件AjaxFileUpload实现无刷新上传文件非常实用,由于其简单易用,因些这个插件相比其它文件上传插件使用人数最多,非常值得推荐。
优点:1、不用表单,便可实现上传文件
为了美观,把 type="file" 控件隐藏。点击“上传”按钮,click调用隐藏文件控件,再选择文件。查了一遍,好像是ie为了安全控制,文件的必须鼠标点击过后,才能提交。还没有想到其他的方法。。。
5,success 提交成功后自动执行的处理函数,参数data就是服务器返回的数据。6,error 提交失败自动执行的处理函数。7,data 自定义参数。fileElementId: 'file1',
-- 引入相关的js文件,相对路径 -->. -- 执行上传文件操作的函数 -->. method=uploader', //需要链接到服务器地址。fileElementId:'houseMaps',