ajax上传文件

来源:互联网 发布:js将数组变为字符串 编辑:程序博客网 时间:2024/05/21 07:14

需要的js文件

jquery.jsajaxfileupload.jsbootstrap-prettyfile.js // 上传文件控件样式[可选],忘记了是否依赖boostrap.jslayer.js // 上传文件时的加载提示框[可选]



上传文件标签 + 按钮

<input type="file" id="testFile" class="form-control"><button type="button" onclick="ajaxFileUpload();" class="btn btn-info form-control">上传文件</button>



js

$("#testFile").prettyFile(); // 美化上传控件function ajaxFileUpload(){    // 加载信息    var layerMsg = layer.msg("上传中",{        icon : 16,        skin : 'layerStyle', // 自定义一个class样式        time : 1000*1000 // 1000秒    });    $.ajaxFileUpload({        url : 'url',        async : 'true',         secureuri : false , // 是否启动安全提交,默认false        fileElementId : 'testFile', // 文件控件id        dataType : 'json',        success : function(data){            layer.close(layerMsg); // 关闭加载信息        },        error : function(data,status,e){            layer.close(layerMsg); // 关闭加载信息        }    });}



服务端用的springmvc

@RequestMapping("upload")public @ResponseBody String upload(@RequestParam MutipartFile testFile){    // 判断空    testFile.isEmpty();    // 获取文件名(包含后缀)    String fileName = testFile.getOriginalFilename();    // 获取文件格式(后缀)    String fileType = fileName.substring(fileName.lastIndexOf("."));    return "返回信息";}
  • ajaxFileUpload方法里 success 方法里面报错,会执行error 方法。

  • 使用prettyFile问题, 第一次选取文件外,选择另一个文件,或者上传完成不会更改上传文件框的里的信息。

// 更改上传文件事件$("#testFile").change(function(){    // 获取文件名    var fileName = $(this).val();    fileName = fileName.substring(fileName.lastIndexOf("\\")+1);    // 更改控件上的显示文字    $(this).closest('div').find('input').val(fileName);// 上传完文件清空控件信息$("#testFile").closest('div').find('input').val(""); // ajaxFileUpload , success方法里面添加});
原创粉丝点击