这篇文章主要为大家详细介绍了ajaxfileupload.js实现上传文件功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用ajaxfileupload.js实现上传文件功能
一、ajaxFileUpload是一个异步上传文件的jQuery插语法：$.ajaxFileUpload([options])
选择参数说明：
1、网址上传处理程序地址
2、fileElementId文件选择框的身份证明(识别)属性，即的身份证明(识别)
3、安全是否启用安全提交，默认为错误的
4、数据类型服务器返回的数据类型。可以为xml，脚本，json，html。如果不填写，jQuery会自动判断
5、成功服务器响应成功后的处理函数，参数数据就是服务器返回的数据
6、误差服务器响应失败后的处理函数
7、数据自定义参数，当有数据要和上传的文件一起传到后台处理的时候会用到。这里注意，数据格式比较严格{param:[{param1 :值1 ， param2 :值2 }，{param1 :值3 ， param2 :值4 }]},其中单引号不能改为双引号
8、类型提交数据的方式，一般为邮政
二、使用方法
第一步、
先引入jquery和ajaxFileUpload插件，注意先后顺序：脚本类型= text/JavaScript src= js/jquery-1。10 .2 .量滴js /脚本
脚本类型= text/JavaScript src= js/Ajax文件上传。js /脚本
第二步、
html代码原始的，控件展示效果如下：
因为原始控件的样式无法改变，所以我们一般会让这个标签隐藏，然后点击别的标签来触发上传控件。
input type= file id= ImportPicInput name= my file style= display:none /
div class=输入-追加
=importPicName 的标签上传原始图片：/标签
input type= text class= input-large id= importPicName /
a class= BTN BTN-默认 onclick= $( # ImportPicInput ).单击();打开/a
/div
展现的页面效果：
第三步、
js代码在用户选择完上传图片后，需要把图片名称显示到输入框中，还需要在射流研究…文件中加入代码：
$(文档)。就绪（功能(e) {
$(body ).on(change ，$(#ImportPicInput )，function(){
$( #importPicName ).val($( #ImportPicInput ).val())；
});
});
上传文件的射流研究…代码：
$.ajaxFileUpload({
类型： POST ，
URL:"/toolkit/importpicfile。做”，
数据：{picParams:text}，//要传到后台的参数，没有可以不写
secureuri : false，//是否启用安全提交，默认为错误的
fileElementId:ImportPicInput ，//文件选择框的身份证明(识别)属性
数据类型： json ，//服务器返回的格式
异步：假，
成功：函数（数据){
if(data.result==success){
//编码
}否则{
//编码
}
},
错误：函数（数据，状态，e){
/编码
}
});
第四步、
java代码@请求映射(value=/importpicfile。do ，products= text/html；charset=utf-8 )
public @ response正文字符串importpicfile 1(@ request param( pic params )字符串pic params，
@ request param multipart file my file，HttpServletRequest请求){
MapString，Object map=new HashMapString，Object()；
if(myfile.isEmpty()){
map.put(结果,错误);
map.put( msg ，上传文件不能为空 );
}否则{
字符串原始文件名=我的文件。get original filename()；
字符串文件basename=文件名utils。getbasename(原始文件名)；
string floder name=file basename _ date util。getnowtimedata()；
尝试{
字符串genePicPath=request。getsession().getServletContext().获取真实路径(/upload/ floder name)；
//把上传的图片放到服务器的文件夹下
FileUtils .copinputstreamtofile(我的文件。getinputstream()，新文件(genePicPath，原始文件名))；
//编码
map.put(结果，成功)；
} catch(异常e) {
map.put(结果,错误);
map.put( msg ，e . getmessage())；
}
}
字符串结果=字符串(JSON对象的. value。来自对象(地图))；
返回结果；
}
三、注意点
(1)上文超文本标记语言中控件的钢性铸铁样式，都是用的引导程序框架里的基本样式，也可以不用使用引导程序框架，仅做参考。
(2)之前用的直播方式，前台js报错找不到。后来查了一下资料，发现在jquery 1.9以上版本已经放弃了live方法。
$(文档)。就绪(功能(e) {
$(#ImportPicInput )。live( change ，function(){
})
});
(3)文件选择框必须有name，也就是java代码中的变量要和name的值一致，也就是@ request param multipart file my file，这个很重要。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
