使用ajax实现文件上传
2018-11-27 20:02
344 查看
记忆不太好,在这里写一写利用ajax实现文件上传.方便以后查看,正好和大家分享分享…
直接上代码吧!
html代码:
<input type="file" name="fileName1" id="fileName1"/> <input type="button" onclick="sendToUser()" id="sendToUser" value="提交" />
js代码:
function sendToUser(){ //在这里进行ajax 文件上传 用户的信息 var $file1 = $("input[name='fileName1']").val();//用户文件内容(文件) // 判断文件是否为空 if ($file1 == "") { alert("请选择上传的目标文件! ") return false; } //判断文件类型,我这里根据业务需求判断的是Excel文件 var fileName1 = $file1.substring($file1.lastIndexOf(".") + 1).toLowerCase(); if(fileName1 != "xls" && fileName1 !="xlsx"){ alert("请选择Execl文件!"); return false; } //判断文件大小 var size1 = $("input[name='fileName1']")[0].files[0].size; if (size1>104857600) { alert("上传文件不能大于100M!"); return false; } boo1 = true; var type = "file"; var formData = new FormData();//这里需要实例化一个FormData来进行文件上传 formData.append(type,$("#fileName1")[0].files[0]); $.ajax({ type : "post", url : "uploadToFile", data : formData, processData : false, contentType : false, success : function(data){ if (data=="error") { alert("文件提交失败!"); }else{ $("input[name='userUrl']").val(data); alert("文件上传成功!"); }} }); }
使用springboot项目进行接收上传文件
controller层:
/** * 上传数据文件 * * @author : lichenfei * @date : 2018年11月22日 * @time : 下午2:46:29 * @return @ */ @RequestMapping("/uploadToFile") @ResponseBody public String uploadToUser(@RequestParam("file") MultipartFile file, HttpServletRequest req, Model model) { String fileName = file.getOriginalFilename(); if (fileName.indexOf("\\") != -1) { fileName = fileName.substring(fileName.lastIndexOf("\\")); } // 获取文件存放地址 String filePath = dataPath; File f = new File(filePath); if (!f.exists()) { f.mkdirs();// 不存在路径则进行创建 } FileOutputStream out = null; try { // 重新自定义文件的名称 Date date = new Date(); SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss"); String d = sdf.format(date);// 时间 filePath = filePath + d + fileName; out = new FileOutputStream(filePath); out.write(file.getBytes()); out.flush(); out.close(); } catch (Exception e) { return "error"; } return filePath; // 返回文件地址 }
新人一枚,有什么问题希望多多指导!
相关文章推荐
- 使用ajaxFileUpload.js插件实现ajax无刷新上传文件
- 使用Ajax实现无刷新上传文件
- 使用struts2和AJAX实现文件上传并显示进度条
- Ajax使用FormData对象实现无刷新上传文件
- (转自dflying chen)使用Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传
- js使用AjaxFileupload插件实现文件上传
- 使用ajaxFileupload实现多文件批量上传
- 使用 Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传
- 使用ajaxFileUpload实现文件异步上传
- 使用ajaxfileupload.js实现ajax上传文件php版
- 使用AjaxFileUpload.js实现异步文件上传示例
- 使用FileApi实现Ajax上传文件
- vuejs使用FormData实现ajax上传图片文件
- 使用Ajaxfileupload插件分别实现单文件和多文件上传
- 使用Ajaxfileupload插件分别实现单文件和多文件上传
- 使用隐藏的iframe 隐藏form提交,仿AJax无刷新提交,可以实现无刷新上传文件
- 使用Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传
- 使用ajaxFileUpload.js插件实现ajax无刷新上传文件
- 使用Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传
- 使用ajaxfileupload.js插件实现Ajax方式上传文件