使用ajax上传文件

最新推荐文章于 2022-08-16 16:41:36 发布

EinBlatt

最新推荐文章于 2022-08-16 16:41:36 发布

阅读量202

点赞数

本文链接：https://blog.csdn.net/Ein_Blatt/article/details/89083163

版权

前端

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="importJquery.jsp"%>
<base href=<%=request.getContextPath()%>"/jsp/"/>
<html>
	<head>
	</head>
<body>
<form  id="uploadFile" >

	<table  width="100%" border="0" cellspacing="5" cellpadding="0">
		<thead>
			<tr><td align="center" colspan="2" class="text_tabledetail2">增加新闻</td></tr>
		</thead>
		<tbody>
			<tr>
				<td style="text-align:right;" class="text_tabledetail2">分类</td>
				<td style="text-align:left;"> 
				<!-- 列出所有的新闻分类 -->
					<select name="categoryId">
	        			<option value="1">国内</option>
	        			<option value="2">国际</option>
	        			<option value="3">娱乐</option>
	        			<option value="4">军事</option>
	        			<option value="5">财经</option>
	        			<option value="6">天气</option>
	        		</select>
				</td>
			</tr>
			<tr>
				<td style="text-align:right;" class="text_tabledetail2">标题</td>
				<td style="text-align:left;"><input type="text" name="title" id="title" value=""/></td>
			</tr>
			<tr>
				<td style="text-align:right;" class="text_tabledetail2">作者</td>
				<td style="text-align:left;"><input type="text" name="author" id="author" value=""/></td>
			</tr>
			
			<tr>
				<td style="text-align:right;" class="text_tabledetail2">摘要</td>
				<td style="text-align:left;"><textarea id="summary" name="summary" rows="8" cols="50"></textarea></td>
			</tr>
			<tr>
				<td style="text-align:right;" class="text_tabledetail2">内容</td>
				<td style="text-align:left;">
				<div id="xToolbar"></div>
				<textarea id="newscontent" name="newscontent" rows="8" cols="30" class="ckeditor"></textarea></td>
			</tr>
			<tr>
				<td style="text-align:right;" class="text_tabledetail2">上传图片</td>
				<td style="text-align:left;"><input type="file" name="file1" value="文件上传"></td>
			</tr>
			<tr>
				<td style="text-align:center;" colspan="2">
					<button type="button" class="page-btn" name="save" id="save">保存</button>
					<button type="button" class="page-btn" name="return" onclick="javascript:location.href='newsDetailList.jsp'">返回</button>
				</td>
			</tr>
		</tbody>
	</table>
</form>
<script type="text/javascript">



    $(function () {
        <%--var flag='${param.flag}';--%>
        <%--if(flag!=""&&flag!=null&&flag!=undefined){--%>
            <%--if(flag=="false"){--%>
                <%--alert("更新失败!");--%>
            <%--}--%>
        <%--}--%>
		
		$("#save").click(function () {


				var date=$("#uploadFile")[0];  //获取表单中的值
				var formData = new FormData(date);  //使用FormData()处理表单中的值

				$.ajax({
					"url":"/newsServlet?opr=add",  //发送的URL
					"type":"POST",        //类型
					"data":formData,      //将数据发送
					// async: false,       //是否同步，否
					// cache: false,       //是否缓存，否
					"dataType":"json",
					"contentType": false,     //需要使用
					"processData": false,     //需要使用
					"success":function(data){
						if(data.flag=="true"){
							alert("增加成功!");
							location.href="newsDetailList.jsp";
						}else{
							alert("增加失败,请检查网络!");
						}
					}
				});

			
		})

    });

</script>
</body>
</html>

后端servlet

   boolean uploadflag = false;
            String uploadFileName = ""; //图片路径
            String fieldName = "";      //表单名称

            //创建新闻
            News n = new News();
            n.setCreateDate(new Date());
            n.setModifyDate(new Date());

            //解析请求之前先判断请求类型是否为文件上传类型
            boolean isMultipart = ServletFileUpload.isMultipartContent(request);
            System.out.println(isMultipart);

            //指定上传位置
            String uploadFilePath = request.getSession().getServletContext().getRealPath("upload/");

            System.out.println("上传位置" + uploadFilePath);

            //设置图片储存位置
            File saveDir = new File(uploadFilePath);

            //如果目录不存在，就创建目录
            if (!saveDir.exists()) {
                saveDir.mkdir();
            }

            //获取表单请求
            if (isMultipart) {
                //创建文件上传核心类
                FileItemFactory factory = new DiskFileItemFactory(); // 实例化一个硬盘文件工厂,用来配置上传组件ServletFileUpload

                ServletFileUpload upload = new ServletFileUpload(factory); // 用以上工厂实例化上传组件
                try {
                    //处理表单请求
                    List<FileItem> items = upload.parseRequest(request);

                    //迭代器迭代请求
                    Iterator<FileItem> iter = items.iterator();

                    while (iter.hasNext()) {
                        //获取单个请求
                        FileItem item = (FileItem)iter.next();

                        if (item.isFormField()) {// 如果是普通表单控件
                            fieldName = item.getFieldName();// 获得该字段名称,对应表单name属性

                            //分类处理
                            if (fieldName.equals("title")) {
                                n.setTitle(item.getString("UTF-8"));//获得该字段值
                            } else if (fieldName.equals("categoryId")) {
                                n.setCategoryId(Integer.parseInt(item.getString("UTF-8")));
                            } else if (fieldName.equals("summary")) {
                                n.setSummary(item.getString("UTF-8"));
                            } else if (fieldName.equals("newscontent")) {
                                n.setContent(item.getString("UTF-8"));
                            } else if (fieldName.equals("author")) {
                                n.setAuthor(item.getString("UTF-8"));
                            }


                        } else {// 如果为文件域
                            String fileName = item.getName();// 获得文件名(全路径)
                            System.out.println("文件名:"+fileName);

                            if (fileName != null && !fileName.equals("")) {
                                File fullFile = new File(fileName);
                                File saveFile = new File(uploadFilePath, fullFile.getName());//将文件保存到指定的路径
                                item.write(saveFile);
                                uploadFileName = fullFile.getName();
                                n.setPicPath(uploadFileName);

                            }

                        }
                    }
                } catch (Exception e) {
                    e.printStackTrace();
                }

            }
            System.out.println("上传成功之后的文件名：" + n.getPicPath());
            //调用后台的方法，将新闻信息插入数据库中
            int r = newsService.addNews(n);
            System.out.println("是否处理成功:"+r);
            if (r>0) {
                uploadflag = true;
            }
            out.write("{\"flag\":\"" + uploadflag + "\"}");