首页 > 代码库 > ajaxFileUpload上传带参数文件及JS验证文件大小

ajaxFileUpload上传带参数文件及JS验证文件大小

本代码片段用于spring boot+hibernate,用maven构建
一:
ajaxFileUpload为了实现无刷新异步提交文件,构建 iframe 然后创建form表单 再将要上传的文件写上去再提交.但是原代码 却没有处理data.所以这块内容需要我们自己加上去. 下面红色部分为修改ajaxFileUpload.js的三处地方:(对比源码修改) 1.createUploadForm: function(id, fileElementId,data); 2.if (data) { for (var i in data) { $(‘<input type="hidden" name="‘ + i + ‘" value="http://www.mamicode.com/‘ + data[i] + ‘" />‘).appendTo(form); } } 3.var form = jQuery.createUploadForm(id, s.fileElementId,s.data);
html部分:
<form id="form1" runat="server" method="post" enctype="multipart/form-data"
<div> 
<div class="_box">选择图片</div> 
</div> 
<div class="none"> 
<input type="file" name="fileID" id="fileID" /> 
</div> 
</form> 
二:

$.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="http://www.mamicode.com/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用

<img class="example-image" src="http://www.mamicode.com/*{‘http://127.0.0.1:8080/foodmain/findimg?name=‘+food.foodimg}"  alt="${food.foodname}" />

后端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

 

ajaxFileUpload上传带参数文件及JS验证文件大小