ajaxfileupload.js实现上传文件功能

2023-08-24 10:04:04 260

使用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@ResponseBodyStringimportPicFile1(@RequestParam("picParams")StringpicParams,
@RequestParamMultipartFilemyfile,HttpServletRequestrequest){

Mapmap=newHashMap();
if(myfile.isEmpty()){
map.put("result","error");
map.put("msg","上传文件不能为空");
}else{
StringoriginalFilename=myfile.getOriginalFilename();
StringfileBaseName=FilenameUtils.getBaseName(originalFilename);
StringfloderName=fileBaseName+"_"+DateUtil.getNowTimeData();
try{

StringgenePicPath=request.getSession().getServletContext().getRealPath("/upload/"+floderName);
//把上传的图片放到服务器的文件夹下
FileUtils.copyInputStreamToFile(myfile.getInputStream(),newFile(genePicPath,originalFilename));
//coding
map.put("result","success");

}catch(Exceptione){
map.put("result","error");
map.put("msg",e.getMessage());

}
}
Stringresult=String.valueOf(JSONObject.fromObject(map));
returnresult;
}

三、注意点

（1）上文html中控件的css样式，都是用的bootstrap框架里的基本样式，也可以不用使用bootstrap框架，仅做参考。
（2）之前用的live方法，前台js报错说找不到这个方法，后来查了资料才发现，1.9以上的jquery版本已经废弃live这个方法了

$(document).ready(function(e){
$('#ImportPicInput').live('change',function(){

})
});

(3)文件选择框必须要有name，即，且java代码中的变量要跟name的值保持一致，即@RequestParamMultipartFilemyfile,这点非常的重要。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

ajaxfileupload.js实现上传文件功能

热门推荐

随机推荐