<1> 输入框及时监听事件 input propertychange
<2> ajax 之 FormData 上传文件
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Api测试</title>
<script type="text/javascript" src="jQuery.js"></script>
</head>
<body>
<input type="file" name="file" id="file"/>
</body>
</html>
<script type="text/javascript">
/*ajax全局设置, 当响应失败的时执行*/
$.ajaxSetup({
error: function(e) {
alert("服务器出错啦");
}
});
/*当文件输入框出现改变时使用*/
$('#file').bind('change', function() {
var formData = new FormData();
var file = $("#file")[0].files[0];
formData.append("file", file);
formData.append("desc", "测试");
$.ajax({
url: "http://localhost:8080/Test/UpLoad",
type: "POST",
contentType: 'multipart/form-data',
data: formData,
async: true,
cache: false,
processData: false, //告诉jQuery不要去设置Content-Type请求头
contentType: false, //告诉jQuery不要去处理发送的数据
success: function(e) {
console.log(e)
}
});
});
</script>
后台接收图片的代码请查看 (以JavaWeb为例) http://www.cnblogs.com/lovling/p/6544183.html