jquery 实现ajax 上传文件的功能（使用插件 ajaxfileupload）
js文件的下载地址 : https://files.cnblogs.com/wangqc/ajaxfileupload.js
页面代码：
<html>
<!-- 引入相关的js文件，相对路径 -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
<!-- 执行上传文件操作的函数 -->
<script type="text/javascript">
function ajaxFileUpload(id){
$.ajaxFileUpload(
{
url: 'About.aspx',
fileElementId: id,
dataType: 'json',
success: function (data, status) {
alert('添加成功');
},
error: function (data, status, e) {
alert('添加失败');
}
});
}
$(function() {
$("#btnSubmit").click(function () {
ajaxFileUpload("mytestfile");
});
});
</script>
</head>
同时 请注意 对应的file 控件一定要有name 属性，否则无论如何都不能进行此上传操作。
主要参数说明：
1，url表示处理文件上传操作的文件路径，可以测试URL是否能在浏览器中直接访问，如上：upload.php
2，fileElementId表示文件域ID，如上：fileToUpload
3，secureuri是否启用安全提交，默认为false
4，dataType数据数据，一般选json，javascript的原生态
5，success提交成功后处理函数
6，error提交失败处理函数
<body>
<form method="post" enctype="multipart/form-data">
<input type="file" value="我的文档" id="mytestfile" name="file1" />
<input type="button" value="上传" id="btnSubmit"/>
</form>
</body>
服务器代码可以参考本人的另外一篇，有详细的详解（前面extjs的部分可以不用看 ，直接跳过看后台的上传部分。 完全没有任何影响！） http://www.cnblogs.com/wangqc/p/extjsFileUpload.html
作者：wangqc
出处：http://www.cnblogs.com/wangqc/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
该文章也同时发布在我的独立博客中-wangqc。
浙公网安备 33010602011771号