ajaxfileupload.js实现上传文件功能实现上传文件功能
使用ajaxfileupload.js实现上传文件功能
一、一、ajaxFileUpload是一个异步上传文件的是一个异步上传文件的jQuery插语法:插语法:$.ajaxFileUpload([options])
options参数说明:
1、url 上传处理程序地址
2、fileElementId 文件选择框的id属性,即的id
3、secureuri 是否启用安全提交,默认为false
4、dataType 服务器返回的数据类型。可以为xml,script,json,html。如果不填写,jQuery会自动判
断
5、success 服务器响应成功后的处理函数 ,参数data就是服务器返回的数据
6、error 服务器响应失败后的处理函数
7、data 自定义参数,当有数据要和上传的文件一起传到后台处理的时候会用到。这里注意,
数据格式比较严格{param:[{‘param1′:’value1′,’param2′:’value2′ },{‘param1′:’value3′,’param2′:’value4′ }]}, 其中单引
号不能改为双引号
8、type 提交数据的方式,一般为post
二、使用方法二、使用方法
第一步、第一步、先引入jquery和ajaxFileUpload插件,注意先后顺序:
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type= "text/javascript" src= "js/ajaxfileupload.js" ></script>
第二步、第二步、html代码
原始的,控件展示效果如下:
因为原始控件的样式无法改变,所以我们一般会让这个标签隐藏,然后点击别的标签来触发上传控件。
<input type ="file" id="ImportPicInput" name= "myfile" style=" display: none" />
<div class ="input-append">
<label for ="importPicName"> 上传原始图片:</label >
<input type ="text" class="input-large" id= "importPicName" />
<a class ="btn btn-default" onclick= "$('#ImportPicInput').click();" > 打开</a>
</div >
展现的页面效果:
第三步、第三步、js代码
在用户选择完上传图片后,需要把图片名称显示到输入框中,还需要在js文件中加入代码:
$(document).ready(function(e) {
$('body').on('change',$('#ImportPicInput'),function(){
$( "#importPicName").val($( "#ImportPicInput").val());
});
});
上传文件的js代码:
$.ajaxFileUpload({
type: "POST",
url: "/toolkit/importPicFile.do",
data:{picParams:text},//要传到后台的参数,没有可以不写
secureuri : false,//是否启用安全提交,默认为false
fileElementId:'ImportPicInput',//文件选择框的id属性
dataType: 'json',//服务器返回的格式
async : false,
success: function(data){
if(data.result=='success'){
//coding
}else{
//coding
}
},
error: function (data, status, e){
/coding
评论0
最新资源