ajax实现文件的上传(局部刷新页面,文件上传)
一、前端jsp页面代码:
//注意,这里的form表单,只去id名
<form id="localAjax">文件:<input type="file" name="file"/><br/><input type="button" value="提交" onclick="ajaxlocal()"/>
</form>
二、ajax,进行局部上传图片操作的代码:
function ajaxlocal(){
// 通过form表单的id获得form表单的对象(也就是把form表单转换成对象)var goodsForm=new FormData(document.getElementById("localAjax"));$.ajax({url : "uploadServlet", type: 'post', //上传文件不能用get请求,只能用post或者put等上传大文件的请求//这里的数据是上面的form表单对象data:goodsForm,dataType : 'json', processData:false,contentType:false,async: true,//将异步设置为同步success : function(data) {if(data=="1"){alert("图片上传成功!");}else{alert(data);}},error:function(e){alert("请重新上传图片");}});
}
三、servlet编写:
public class uploadServletextends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {
// 实例化一个硬盘文件工厂,用来配置上传组件ServletFileUploadDiskFileItemFactory factory=new DiskFileItemFactory();
// 使用工厂对象实例化上传组件ServletFileUploadServletFileUpload upload=new ServletFileUpload(factory);String file="";try {
/** 获得所有表单的数据,将请求来的数据转成集合,这里是普通字符和文件的区别,不懂的看我的博客-----form表单上传文件List<FileItem> items=upload.parseRequest(req);for(int i=0;i<items.size();i++){FileItem item=items.get(i);if(item.isFormField()){//如果item是普通的表单String name=item.getFieldName();if(name.equals("g_name")){g_name=item.getString("utf-8");}}else{*/// 上传文件,获得文件的保存路径String filePath=req.getServletContext().getRealPath("/");String fileName=item.getName();//文件名称file=fileName;String path=filePath+"p_goods\\"+fileName;File file=new File(path);
// 复制一个文件,相当于服务器daunt生成一个文件item.write(file);//}}}catch (Exception e) {e.printStackTrace();}//如果想操作数据库,可以使用数字标识的方式进行前端数据的区分resp.getWriter().write(new Gson().toJson("1"));
四、我这里没有去操作数据库只是单纯的上传文件。
这里总结一下:
ajax局部上传文件,其实和form表单上传文件差不多,只不过是利用FormData这个类来封装document.getElementById(“localAjax”)所获得的对象,然后,将此封装好的对象通过json的格式传给后台。后续的一些操作都是相似的,注意要设置异步为同步。同步异步的设置会影响到你页面刷新数据的时机,设置异步的话,有时候数据库的数据,不会显示在页面上。
ajax实现文件的上传(局部刷新页面,文件上传)相关推荐
- ajax右侧刷新加载jsp,jsp实现局部刷新页面、异步加载页面的方法
jsp实现局部刷新页面.异步加载页面的方法 局部刷新页面.异步加载页面方案: 1.在jsp页面需要刷新的地方增加一个控件 2.新建一个jsp页面:aaa.jsp(用来放置需要刷新的内容) 3.将id为 ...
- a标签不跳转+ajax异步请求+局部刷新页面
a标签不跳转 <td style="text-align:center;"><a href="" style="color: #2d ...
- 使用AJAX局部刷新页面
使用AJAX局部刷新页面 局部刷新页面也就是定时性获取数据库信息,此方法也适用于刷新表格,不过表格刷新时会进行闪烁,根据自己代码决定是否使用此方式刷新表格数据(侵删). 方法一 setInterval ...
- 用Ajax+js+jQuery实现无闪烁定时刷新页面 定时刷新
本人想在一个JSP页面上显示一个消息模块,这个消息需要定时更新,请问大家如何用Ajax+js+jQuery实现无闪烁定时刷新页面功能.本人使用的js框架是jQuery. 先说思路,那就是在前端用 js ...
- Jquery 返回上一级并刷新页面
Jquery 返回上一级并刷新页面 $.ajax({url:'',type:'POST',data:{},dataType:'json',success:function(data,textStatu ...
- jQuery框架+DWR框架实现的Java Web中的Ajax效果(异步请求,局部刷新)
一 简介和实现效果 这里用一个小例子来简单举例说明,做一个搜索引擎搜索提示效果,通过不断输入字符,然后在下方给出搜索提示.效果图如下: 通过上图可以看到,当输入一个"a"时,提示了 ...
- 第九章php与数据交互,利用ajax实现与php数据交互,并局部刷新页面
本文主要有以下几个要点: ajax的基本语法结构 jQuery基本语法 json数组基本结构 ajax回调函数中的json数组解析及局部刷新 php基本语法 ajax与php的对接 php中post数 ...
- ajax局部刷新页面
1.Ajax应用程序的优势在于: 1. 通过异步模式,提升了用户体验 2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用 3. Ajax引擎在客户端运行,承担了一部分本来由服务 ...
- vue-element-admin局部刷新页面
在写业务需求的时候遇到了一个帮助文档的需求,里面存在大量静态页面,有考虑几个方案. 组件引入 嵌套路由局部刷新 后面考虑了如果频繁引入组件会导致不好修改.这里就想到了嵌套路由的局部刷新.因为借鉴了友盟 ...
- Ajax请求数据与删除数据后刷新页面
1.ajax异步请求数据后填入模态框 请求数据的按钮(HTML) <a class="queryA" href="javascript:void(0)" ...
最新文章
- Tomcat 7最大并发连接数的正确修改方法(转)
- python处理数据的优势-选择python进行数据分析的理由和优势
- Java开发知识之Java中的集合上List接口以及子类讲解.
- undefined reference to 问题解决方法
- React开发(150):注意定义数组格式
- vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确, 然后再试一次。
- ehcache springboot_Spring Boot 入门示例合集(附源代码)
- 联想拯救者Legion Y7000P 2020款(10代INTEL+GTX1650)安装ubuntu16.04(双系统)
- 【总结】Transformer结构及其9中变体汇总!
- 在Mac中关闭应用通知的两种方法
- 爱上Ada语言与系统
- 攻略:简易VBS病毒制作
- 光伏窗性能研究(3)——单层光伏窗节能性能研究
- 同态加密 bootstrapping自举算法
- 为win7系统盘减肥
- 计算机如何安装无线网络适配器,无线网卡驱动怎么安装?电脑无线网卡驱动2种安装方法...
- Encoder-Decoder综述理解(推荐)
- ipv6头部格式 c语言,2.2.1 IPv6和IPv4基本头部格式
- mysql的时间最晚日期_MySQL日期时间函数
- 智能电视以及机顶盒屏幕截取的方法