一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
jQuery插件AjaxFileUpload可以实现ajax文件上传，该插件使用非常简单，首先了解一下正确使用AjaxFileUpload插件的方法，然后再了解一些常见的错误信息和解决方法。
使用说明
需要使用jQuery库文件和AjaxFileUpload库文件
使用实例
一，包含文件部分
<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，如下：
<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实现无刷新上传文件非常实用，由于其简单易用，因些这个插件相比其它文件上传插件使用人数最多，非常值得推荐。
处理页面：
usingSystem;
usingSystem.Collections;
usingSystem.Configuration;
usingSystem.Data;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.HtmlControls;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
publicpartialclassweb_ajax_FileUpload:System.Web.UI.Page
{
protectedvoidPage_Load(objectsender,EventArgse)
{
HttpFileCollectionfiles=HttpContext.Current.Request.Files;
//if(files[0].ContentLength>5)
//{
//Response.Write("{");
//Response.Write("msg:'"+files[0].FileName+"',");
//Response.Write("error:'文件上传失败'");
//Response.Write("}");
//}
//else
//{
//Response.Write("{");
//Response.Write("msg:'没有文件被上传',");
//Response.Write("error:'文件上传失败'");
//Response.Write("}");
//}
files[0].SaveAs("d:/adw.jpg");
Response.Write("{");
Response.Write("msg:'a',");
Response.Write("error:''");
Response.Write("}");
//Response.Write("{");
//Response.Write("msg:'ggg\n',");
//Response.Write("error:'aa\n'");
//Response.Write("}");
Response.End();
}
}
其它网友的补充：
页面代码：
<html>
<!--引入相关的js文件，相对路径 -->
<scripttype="text/javascript"src="js/jquery.js"></script>
<scripttype="text/javascript"src="js/ajaxfileupload.js"></script>
<!--执行上传文件操作的函数--> <scripttype="text/javascript"> functionajaxFileUpload(){ $.ajaxFileUpload( { url:'update.do?method=uploader', //需要链接到服务器地址 secureuri:false, fileElementId:'houseMaps', //文件选择框的id属性 dataType:'xml', //服务器返回的格式，可以是json success:function(data,status) //相当于java中try语句块的用法 { $('#result').html('添加成功'); }, error:function(data,status,e) //相当于java中catch语句块的用法 { $('#result').html('添加失败'); } } ); } </script> </head> <body> <formmethod="post"action="update.do?method=uploader"enctype="multipart/form-data"> <inputtype="file"id="houseMaps"name="houseMaps"/> <inputtype="button"value="提交"onclick="ajaxFileUpload()"/> </form> <divid="result"></div> </body> </html>