ajax上传文件判断大小,ajaxFileUpload上传带参数文件及JS验证文件大小 Web程序 - 贪吃蛇学院-专业IT技术平台...

本代码片段用于spring boot+hibernate，用maven构建

一：

ajaxFileUpload为了实现无刷新异步提交文件,构建 iframe 然后创建form表单 再将要上传的文件写上去再提交.但是原代码 却没有处理data.所以这块内容需要我们自己加上去.

下面红色部分为修改ajaxFileUpload.js的三处地方:(对比源码修改)

1.createUploadForm: function(id, fileElementId,data);

2.if (data) {

for (var i in data) {

$(‘‘).appendTo(form);

}

}

3.var form = jQuery.createUploadForm(id, s.fileElementId,s.data);

html部分：

选择图片

二：

$.ajaxFileUpload({ url: ‘URL‘,

type: ‘post‘,

data : {

url : url

},

secureuri: false, //一般设置为false

fileElementId: ‘fileID‘, // 上传文件的id、name属性名

dataType: ‘JSON‘, //返回值类型，一般设置为json、application/json 这里要用大写 不然会取不到返回的数据

success: function(data, status){

alert(data);

},

error: function(data, status, e){

alert(e);

}

});

三：后台读取并保存到文件夹中 //保存目录为 E:\saveIMG

@ResponseBody

@RequestMapping("/addandupload")

public String addandupload(@RequestParam(value="uploadIMG", required=false) MultipartFile file) {

String filename = file.getOriginalFilename();

String filepath = "E:\\saveIMG\\"; //文件上传保存目录

if (!file.isEmpty()) {  //判断是否有文件上传

try {

byte[] bytes = file.getBytes();

BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(new File(filepath, filename)));

stream.write(bytes);

stream.close();

} catch (Exception e) {

e.printStackTrace();

}

}

页面显示多个服务器图片：

一：

HTML页面的IMG标签中的src用

后端http://127.0.0.1:8080/foodmain/findimg?name?方法

@ResponseBody

@RequestMapping("/findimg")

public void findimg(HttpServletResponse response,String name) throws IOException{

File filePic = new File("E:\\saveIMG\\"+name);

if(filePic.exists()){

FileInputStream is = new FileInputStream(filePic);

int i = is.available(); // 得到文件大小

byte data[] = new byte[i];

is.read(data); // 读数据

is.close();

response.setContentType("image/*"); // 设置返回的文件类型

OutputStream toClient = response.getOutputStream(); // 得到向客户端输出二进制数据的对象

toClient.write(data); // 输出数据

toClient.close();

}

}

JS验证上传文件大小，参考：http://zhuchengzzcc.iteye.com/blog/1573360