- <form id= "uploadForm" action= "http://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({
- url : "http://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);
- }
- });
关于FormData及其用法
XMLHttpRequest Level 2添加了一个新的接口
FormData .利用FormData对象 ,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send() 方法来异步的提交这个"表单".比起普通的ajax,使用FormData 的最大优点就是我们可以异步上传一个二进制文件. 所有主流浏览器的较新版本都已经支持这个对象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
|
- var oData = new FormData(document.forms.namedItem("fileinfo" ));
- oData.append( "CustomField", "This is some extra data" );
- var oReq = new XMLHttpRequest();
- oReq.open( "POST", "stash.php" , true );
- oReq.onload = function(oEvent) {
- if (oReq.status == 200) {
- oOutput.innerHTML = "Uploaded!" ;
- } else {
- oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";
- }
- };
- oReq.send(oData);
这里使用JQuery,但是老版本的JQuery比如1.2是不支持的,最好使用2.0或更新版本:
- <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>
- function doUpload() {
- var formData = new FormData($( "#uploadForm" )[0]);
- $.ajax({
- url: 'http://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);
- }
- });
- }