donghongbz 2009-05-29
ajaxfileupload是一款jQuery插件,用来实现文件的ajax方式上传功能。
下载地址:
http://www.phpletter.com/download_project_version.php?version_id=6
在页面中使用ajaxfileupload其实很简单,在页面加入如下JavaScript代码:
function ajaxFileUpload() { $.ajaxFileUpload ( { url:'/ajax/upload.action', 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); } } ) return false; }
下载下来的包中有一个例子,不过服务器是PHP。我们需要在服务器端使用Struts2,并且需要struts2返回json结果,因此struts2需要json插件,下载地址:
http://jsonplugin.googlecode.com/files/jsonplugin-0.33.jar
struts.xml配置中的Action结果类型:
<action name="upload" class="..."> <param name="contentType" value="text/html"/> <result type="json"></result> </action>
其中,contentType参数是一定要有的,否则浏览器总是提示将返回的JSON结果另存为文件,不会交给ajaxfileupload处理。这是因为struts2JSONPlugin默认的contentType为application/json,而ajaxfileupload则要求为text/html。
为了美观,把 type="file" 控件隐藏。点击“上传”按钮,click调用隐藏文件控件,再选择文件。查了一遍,好像是ie为了安全控制,文件的必须鼠标点击过后,才能提交。还没有想到其他的方法。。。
5,success 提交成功后自动执行的处理函数,参数data就是服务器返回的数据。6,error 提交失败自动执行的处理函数。7,data 自定义参数。fileElementId: 'file1',
-- 引入相关的js文件,相对路径 -->. -- 执行上传文件操作的函数 -->. method=uploader', //需要链接到服务器地址。fileElementId:'houseMaps',