利用jquery的ajax实现文件上传

我们先编写页面并导入jquery的包

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<input type="file" name="file"><br>
<input type="button" value="上传"><br>
</body>
</html>

然后为它添加相应的ajax代码，对于jquery如何使用我就不再讲解，大家可以去以下网址进行学习：jQuery 教程 | 菜鸟教程 (runoob.com)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<input type="file" name="file"><br>
<input type="button" value="上传"><br>
</body>
</html>
<script>$(":button").click(function () {var datas = new FormData();datas.append("file",$(":file").get(0).files[0]);$.ajax({url:"ser01",type:"post",dataType:"json",processData: false,contentType:false,data:datas,success:function (data) {console.log(data)}})})
</script>

接下我们编写后端代码：

    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {DiskFileItemFactory diskFileItemFactory  = new DiskFileItemFactory();ServletFileUpload upload = new ServletFileUpload(diskFileItemFactory);try {List<FileItem> fileItems = upload.parseRequest(req);for (FileItem fileItem : fileItems) {if (fileItem.isFormField()){//                是普通表单元素System.out.println("普通表单元素"+fileItem.getName()+"="+fileItem.getString());}else{//                是文件System.out.println("文件："+fileItem.getName()+"    文件流inputStream："+fileItem.getInputStream());int len;byte buffer[] = new byte[1024*10];BufferedInputStream bis = new BufferedInputStream(fileItem.getInputStream());BufferedOutputStream bos = new BufferedOutputStream(new FileOutputStream("E:/"+fileItem.getName()));while ((len=bis.read(buffer))!=-1){bos.write(buffer,0,len);}bos.flush();bis.close();bos.flush();}}Map<String,Object> result = new LinkedHashMap<>();result.put("code","200");result.put("msg","上传成功");result.put("data","");resp.setContentType("text/html;charset=utf-8");resp.getWriter().write(JSONObject.toJSONString(result));} catch (FileUploadException e) {e.printStackTrace();}}

在我们进行调用后，上传的文件确实在后台服务器中被接收到了，而且也成功的被写入到了E盘中

利用jquery的ajax实现文件上传相关推荐

jquery的ajax提交文件上传
以前的项目大多的使用jquery的插件来进行文件上传,对于就只引用jquery而不使用插件来上传文件之前未有写过,最近项目里有写到和用到,就记录一下,以后方便查找. 提示:存在浏览器皆容问题,谨慎使用 ...
html标签手册 360doc,基于AJAX的文件上传控件NetAdvantage for jQuery
NetAdvantage for jQuery 是一款全新的轻量级.高性能的jQuery控件,包含了在线的Video播放控件,基于AJAX的文件上传控件,快速且强大的表格控件,以及创建和编辑Word. ...
nodejs ajax进度条,Ajax异步文件上传与NodeJS express服务端处理的示例分析
Ajax异步文件上传与NodeJS express服务端处理的示例分析发布时间:2021-07-24 11:17:21 来源:亿速云阅读:79 作者:小新这篇文章主要介绍Ajax异步文件上传与N ...
java mvc上传文件进度_java相关：springMVC+ajax实现文件上传且带进度条实例
java相关:springMVC+ajax实现文件上传且带进度条实例发布于 2020-7-5| 复制链接本篇文章主要介绍了springMVC+ajax实现文件上传且带进度条实例,具有一定的参考价值 ...
java+ajax实现文件上传
1 文件上传利用Java+ajax实现文件上传,这里介绍两种提交方法,第一种是file提交,第二种是base64提交 1.1 file方式 1.1.1 FileNameUtils public cl ...
ajax文件插件上传,7 款基于 JavaScript/AJAX 的文件上传插件
本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传拖拽操作实时上传进度自定义上传限制希望能为你的开发工作带来帮助. 具有多文件上传.拖 ...
使用ajax实现文件上传，使用input实现本地图片展示
使用ajax实现文件上传,使用input实现本地图片展示一.实现本地图片预览 HTML: <input type="file" id="chooseImage&q ...
HTML5结合ajax实现文件上传以及进度显示
基于原生html5实现,不需要falsh支持,进度可以自定义显示,控制灵活, 本来打算使用jquery插件进行异步文件上传,比如uploadfy但是需要额外的支持,也有人用iframe模仿异步上传机制 ...
java html5 上传_HTML5结合ajax实现文件上传以及进度显示
基于原生html5实现,不需要falsh支持,进度可以自定义显示,控制灵活, 本来打算使用jquery插件进行异步文件上传,比如uploadfy但是需要额外的支持,也有人用iframe模仿异步上传机制 ...

利用jquery的ajax实现文件上传

利用jquery的ajax实现文件上传相关推荐

最新文章

热门文章