这篇文章将为大家详细讲解有关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插件，注意先后顺序：
第二步、html代码
原始的，控件展示效果如下：
因为原始控件的样式无法改变，所以我们一般会让这个标签隐藏，然后点击别的标签来触发上传控件。
上传原始图片：
打开
展现的页面效果：
第三步、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
}
});第四步、java代码
@RequestMapping(value="/importPicFile.do" ,produces="text/html;charset=utf-8" )
public @ResponseBody String importPicFile1(@RequestParam("picParams") String picParams,
@RequestParam MultipartFile myfile,HttpServletRequest request){
Map map= new HashMap();
if(myfile.isEmpty()){
map.put( "result", "error");
map.put( "msg", "上传文件不能为空" );
} else{
String originalFilename=myfile.getOriginalFilename();
String fileBaseName=FilenameUtils.getBaseName(originalFilename);
String floderName=fileBaseName+"_" +DateUtil.getNowTimeData();
try{
String genePicPath=request.getSession().getServletContext().getRealPath("/upload/" +floderName);
//把上传的图片放到服务器的文件夹下
FileUtils. copyInputStreamToFile(myfile.getInputStream(), new File(genePicPath,originalFilename));
//coding
map.put( "result", "success");
} catch (Exception e) {
map.put( "result", "error");
map.put( "msg",e.getMessage());
}
}
String result=String. valueOf(JSONObject.fromObject (map));
return result;
}三、注意点
（1）上文html中控件的css样式，都是用的bootstrap框架里的基本样式，也可以不用使用bootstrap框架，仅做参考。
（2）之前用的live方法，前台js报错说找不到这个方法，后来查了资料才发现，1.9以上的jquery版本已经废弃live这个方法了
$(document).ready(function(e) {
$('#ImportPicInput ').live( 'change', function(){
})
});(3)文件选择框必须要有name，即，且java代码中的变量要跟name的值保持一致，即@RequestParam MultipartFile myfile,这点非常的重要。
关于“ajaxfileupload.js怎么实现上传文件功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
网站栏目：ajaxfileupload.js怎么实现上传文件功能
当前URL：
http://cdxtjz.com/article/giedpc.html
