核心提示:formData上传文件,form表单提交的方式上传文件:form id= uploadForm action= https://localhost:8080/cfJAX_RS/rest/file/u...
formData上传文件,form表单提交的方式上传文件:
<form id= "uploadForm" action= "https://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data"> <h1 >测试通过Rest接口上传文件 </h1> <p >指定文件名: <input type ="text" name="filename" /></p> <p >上传文件: <input type ="file" name="file" /></p> <p >关键字1: <input type ="text" name="keyword" /></p> <p >关键字2: <input type ="text" name="keyword" /></p> <p >关键字3: <input type ="text" name="keyword" /></p> <input type ="submit" value="上传"/> </form>不过、不支持跨域。而且必须页面跳转
Ajax的方式进行请求的:
$.ajax({ url : "https://localhost:8080/STS/rest/user", type : "POST", data : $( '#postForm').serialize(), success : function(data) { $( '#serverResponse').html(data); }, error : function(data) { $( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText); } });如上,通过$('#postForm').serialize()可以对form表单进行序列化,从而将form表单中的所有参数传递到服务端。 但是上述方式,只能传递一般的参数,上传文件的文件流是无法被序列化并传递的。 不过如今主流浏览器都开始支持一个叫做FormData的对象,有了这个FormData,我们就可以轻松地使用Ajax方式进行文件上传了。
FormData,这里使用JQuery
Html代码
<form id= "uploadForm"> <p >指定文件名: <input type="text" name="filename" value= ""/></p > <p >上传文件: <input type="file" name="file"/></ p> <input type="button" value="上传" onclick="doUpload()" /> </form>
Js代码
function doUpload() { var formData = new FormData($( "#uploadForm" )[0]); $.ajax({ url: 'https://localhost:8080/cfJAX_RS/rest/file/upload' , type: 'POST', data: formData, async: false, cache: false, contentType: false, processData: false, success: function (returndata) { alert(returndata); }, error: function (returndata) { alert(returndata); } }); }