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 {
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
//		实例化一个硬盘文件工厂,用来配置上传组件ServletFileUpload
		DiskFileItemFactory factory=new DiskFileItemFactory();
//		使用工厂对象实例化上传组件ServletFileUpload
		ServletFileUpload 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的格式传给后台。后续的一些操作都是相似的,注意要设置异步为同步。同步异步的设置会影响到你页面刷新数据的时机,设置异步的话,有时候数据库的数据,不会显示在页面上。

猜你喜欢

转载自blog.csdn.net/weixin_41557853/article/details/86529425
今日推荐