jquery使用AjaxFileUpload和struts2上传文件

最新推荐文章于 2024-11-12 10:54:49 发布

iteye_21104

最新推荐文章于 2024-11-12 10:54:49 发布

阅读量120

点赞数

分类专栏： jquery 文章标签： javascript php java ViewUI

本文链接：https://blog.csdn.net/iteye_21104/article/details/82359404

版权

jquery 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

[color=blue]这是我做的广告发布系统的部分代码,附件是官方PHP和我自己写的JSP+Struts2例子[/color]

[color=red]AjaxFileUpload的核心函数[/color]

function ajaxFileUpload()
{
	var edit_pic_remark = $("#edit_pic_remark").val();
	var edit_pic_href=$("#edit_pic_href").val();
	var theTImageId = $("#sessPicId_text").val();
	var theTImageSrc=$("#theImgFile").val();
	//alert(theTImageSrc);
	$("#loading")
	.ajaxStart(function(){
		$(this).show();
	})
	.ajaxComplete(function(){
		$(this).hide();
	});
	$.ajaxFileUpload
	(
		{
			url:'admin/editTImage.action',
			secureuri:false,
			fileElementId:'theImgFile',
			dataType: 'multipart/form-data',
			data:{id:theTImageId,remark:edit_pic_remark,href:edit_pic_href,uploadFileName:theTImageSrc},
			success: function (data, status)
			{
				if(typeof(data.error) != 'undefined')
				{
					if(data.error != '')
					{
						alert(data.error);
					}else
					{
						alert(data.msg);
					}
				}
				loadPicList(1);
				updateThisPic(theTImageId);
			},
			error: function (data, status, e)
			{
				alert(e);
			}
		}
	)
	return false;
}

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>
</head>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/ajaxfileupload.js"></script>
<script type="text/javascript">
	function ajaxFileUpload()
	{
		var edit_pic_remark = $("#edit_pic_remark").val();
		var edit_pic_href=$("#edit_pic_href").val();
		var theTImageId = $("#sessPicId_text").val();
		var theTImageSrc=$("#theImgFile").val();
		//alert(theTImageSrc);
		$("#loading")
		.ajaxStart(function(){
			$(this).show();
		})
		.ajaxComplete(function(){
			$(this).hide();
		});
		$.ajaxFileUpload
		(
			{
				url:'admin/editTImage.action',
				secureuri:false,
				fileElementId:'theImgFile',
				dataType: 'multipart/form-data',
				data:{id:theTImageId,remark:edit_pic_remark,href:edit_pic_href,uploadFileName:theTImageSrc},
				success: function (data, status)
				{
					if(typeof(data.error) != 'undefined')
					{
						if(data.error != '')
						{
							alert(data.error);
						}else
						{
							alert(data.msg);
						}
					}
					loadPicList(1);
					updateThisPic(theTImageId);
				},
				error: function (data, status, e)
				{
					alert(e);
				}
			}
		)
		return false;
	}
	function updateThisPic(id){
		$("#showArea").load("admin/showPicById.action?id=" + id);
	}
	<%--上传图片--%>
	function uploadFun() {
		targetForm = document.forms['uploadForm'];
		targetForm.action = "/btw/admin/proUpload.servlet";
	}
	function loadPicList(i) {
		$("#picList").load("admin/picQueryPageByAjax.action?currentPage=" + i);
	}
	function showThisPic(id) {
		$("#showArea").load("admin/showPicById.action?id=" + id);
		$("#sessPicId_text").val(id);
		$("#picDetail").text("");
	}
	function nextPage() {
		var page = parseInt($("#currentPage").html()) + 1;
		loadPicList(page);
	}
	function prePage() {
		var page = parseInt($("#currentPage").html()) - 1;
		loadPicList(page);
	}
	function display_theUploadDiv(){
		$("#theUploadDiv").css("display","block");
		$("#picEdit").css("left","350px");
	}
	function picEdit(){
		var id=$("#sessPicId_text").val();
		$("#picDetail").load("editTImage!getImageDetail.action?id="+id);
	}
	function getAuthority(){
		var authorityCode=window.prompt("请输入权限验证码：","");
	}
</script>
<body onload="loadPicList(1);">
	<div>
		<div id="theUploadDiv" style="display:block">
			<form method="post" enctype="multipart/form-data" id="uploadForm">
				<input type="file" name="upload" id="upload" disabled/>
				<input type="submit" value="上传到服务器" onClick="uploadFun()" disabled/>
			</form>
		</div>
		<!-- <div id="picEdit" style="position: absolute; top: 8px; left: 350px;"> -->
		<div id="picEdit" style="position: absolute; top: 8px; left: 350px;">
			<input type="button" value="添加" disabled/>
			<input type="button" value="编辑" onclick="picEdit()"/> 
			<input type="button" value="保存" onclick="ajaxFileUpload();"/>
			<input type="button" value="删除" disabled/>
			<input type="button" value="获取权限" onclick="getAuthority()"/>
			当前图片ID:<input type="text" id="sessPicId_text" style="width:60px" value=""></input>
		</div>
	</div>
	<div>
		<div id="picDetail"
			style="position: absolute; top: 40px; left: 10px; width: 800px; height: 80px; overflow: auto; border: 1px solid #06F;">
		</div>
		<div id="showArea"
			style="position: absolute; top: 140px; left: 10px; width: 800px; height: 440px; overflow: auto; border: 1px solid #06F;">
			<img id="imgComponent" src="<%=request.getAttribute("src")%>" />
			<!--
			<img src="<%=request.getAttribute("src")%>" width="200"/>
			 -->
		</div>
	</div>
	<div id="picListDiv"
		style="width: 250px; height: 570px; position: absolute; top: 10px; left: 830px; border: 1px solid #06F;">
		<center>
			<div id="picList"></div>
			<div style="width: 150px;">
				<input type="image" src="../images/prePage.gif" onclick="prePage()" />
				<input type="image" src="../images/nextPage.gif"
					onclick="nextPage()" />
			</div>
		</center>
	</div>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=GBK"
	pageEncoding="GBK"%>
<img id="loading" src="../images/loading.gif" style="display: none;">
<form action="" method="POST" enctype="multipart/form-data">
	<table width="800" border="0">
		<tr>
			<td width="66">添加人</td>
			<td width="168"><label for="textfield3"></label> <input
				type="text" name="textfield" id="textfield3" readonly="readonly"
				value="${requestScope.edit_pic_operName }" /></td>
			<td width="71">图片描述</td>
			<td width="467"><label for="textfield6"></label> <input
				type="text" name="edit_pic_remark" id="edit_pic_remark"
				style="width: 400px" value="${requestScope.edit_pic_remark }" /></td>
		</tr>
		<tr>
			<td>创建时间</td>
			<td><label for="textfield4"></label> <input type="text"
				name="textfield2" id="textfield4" readonly="readonly"
				value="${requestScope.edit_pic_createTime }" /></td>
			<td>图片链接</td>
			<td><input type="text" name="edit_pic_href" id="edit_pic_href"
				style="width: 400px" value="${requestScope.edit_pic_href }" /></td>
		</tr>
		<tr>
			<td>前台状态</td>
			<td><input type="radio" name="RadioGroup1" value="1"
				id="RadioGroup1_0" checked="checked" /> 显示 <input type="radio"
				name="RadioGroup1" value="2" id="RadioGroup1_1" /> 隐藏</td>
			<td>图片浏览</td>
			<td><input type="file" name="theImgFile" id="theImgFile"
				style="width: 400px" /></td>
		</tr>
	</table>
</form>

package com.baitw.struts.admin.action;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.UnsupportedEncodingException;

import org.apache.struts2.ServletActionContext;

import com.baitw.dao.ImageDao;
import com.baitw.hibernate.entity.TImage;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;

/**
 * 
 * 编辑图片信息
 * 
 * */

public class EditTImage extends ActionSupport {

	private int id;
	private String remark;
	private String href;

	private ImageDao imageDao;

	private File theImgFile;
	private String uploadContentType;
	private String savePath;
	private String uploadFileName;

	public File getTheImgFile() {
		return theImgFile;
	}

	public void setTheImgFile(File theImgFile) {
		this.theImgFile = theImgFile;
	}

	public String getUploadFileName() {
		return uploadFileName;
	}

	public void setUploadFileName(String uploadFileName) {
		this.uploadFileName = uploadFileName;
	}

	public String getUploadContentType() {
		return uploadContentType;
	}

	public void setUploadContentType(String uploadContentType) {
		this.uploadContentType = uploadContentType;
	}

	public String getSavePath() {
		return ServletActionContext.getRequest().getRealPath(savePath);
	}

	public void setSavePath(String savePath) {
		this.savePath = savePath;
	}

	public void setRemark(String remark) {
		this.remark = remark;
	}

	public void setHref(String href) {
		this.href = href;
	}

	public void setImageDao(ImageDao imageDao) {
		this.imageDao = imageDao;
	}

	public void setId(int id) {
		this.id = id;
	}

	@Override
	public String execute() throws Exception {
		// TODO Auto-generated method stub
		System.out.println("-------------------------------------------------------------");
		remark = new String(remark.getBytes("GBK"), "UTF-8");
		href = new String(href.getBytes("GBK"), "UTF-8");
		System.out.println("EditTImage.id:"+id);
		System.out.println("EditTImage.remark:" + remark);
		System.out.println("EditTImage.href:" + href);
		imageDao.editTImage(id, remark, href);
		if(theImgFile!=null){
			System.out.println("开始上传文件");
			System.out.println("图片名："+uploadFileName);
			String appden = uploadFileName.substring(uploadFileName.lastIndexOf("."));
			String serverFileName =  String.valueOf("AD"+System.currentTimeMillis());
			String realSavePath = ServletActionContext.getRequest().getRealPath(savePath);
			String toPath = realSavePath + "\\" + serverFileName+appden;
			System.out.println(realSavePath);
			System.out.println(toPath);
			imageDao.UploadOriginalImage_x(theImgFile, toPath);
			imageDao.updateTImageURL(id, serverFileName, savePath+serverFileName+appden);
		}else if(theImgFile==null){
			System.out.println("没有上传文件");
		}
		return "success";
	}

	public String getImageDetail() throws UnsupportedEncodingException {
		ActionContext ctx = ActionContext.getContext();
		TImage t = imageDao.getTImageById(id);
		System.out.println("t.getTUser().getFullname():"
				+ t.getTUser().getFullname());
		ctx.put("edit_pic_operName", t.getTUser().getFullname());
		ctx.put("edit_pic_remark", t.getRemark());
		ctx.put("edit_pic_createTime", t.getCreatetime());
		ctx.put("edit_pic_href", t.getHref());
		return "getImageDetail";
	}
}