$.ajax({
type: 'POST',
url: url
,
data: data
,
success: success
,
dataType: dataType
})
这里 ajax 使用租升 POST 类型提交，php 就用 $_POST 接收族型携。
用到两个对象第一个对象：FormData
第二个对象：XMLHttpRequest
目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象，但IE9尚未含乱支持 FormData 对象，还在用IE6 ? 只能仰天长叹....
有了这两个对象，我们可以真正的实现Ajax方式上传文件。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Html5 Ajax 上传文件</title>
<script type="text/javascript">
function UpladFile() {
var fileObj = document.getElementByIdx_x_x("file").files[0]// 获取文件对象
var FileController = "../file/save" // 接收上传文件的后台地址
// FormData 对象
var form = new FormData()
form.append("author", "hooyes") // 可以增加表单数据
form.append("file", fileObj) // 文件对象
// XMLHttpRequest 对象
var xhr = new XMLHttpRequest()
xhr.open("post", FileController, true)
xhr.onload = function () {
alert("上传完成!")
}
xhr.send(form)
}
</script>
</head>
<body>
<input type="file" id="file" name="myfile" />
<input type="button" onclick="UpladFile()" value="上传" />
</body>
</html>
很简洁的代码，便可以达到Ajax方式上传文件，上面的代码中使用<input type="file" />这种传统的选择文件基敏的方法产生文件对象，HTML5还支持使用多种谈锋档更灵活的方式，如拖拽文件到指定的元素上产生。
使用FormData，进穗念行Ajax请求并上传携旦文件这里使用JQuery，但是老版本的JQuery比如1.2是不支持的，最好使用2.0或更新版本：
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: '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)
}
})
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）