`

jquery使用AjaxFileUpload和struts2上传文件

 
阅读更多
这是我做的广告发布系统的部分代码,附件是官方PHP和我自己写的JSP+Struts2例子

AjaxFileUpload的核心函数 
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";
	}
}
分享到：
| jQuery操作元素内容的相关方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery 插件ajaxfileupload与struts2结合 实现异步上传图片

    在本文中，我们将深入探讨如何将jQuery插件AjaxFileUpload与Struts2框架结合，以实现异步图片上传的功能。这种技术在现代Web应用中非常常见，它提升了用户体验，允许用户在不刷新整个页面的情况下上传文件，特别是...

    struts2下利用jquery、ajaxfileupload实现无刷新上传文件

    总的来说，通过整合Struts2、jQuery和AJAXFileUpload，我们可以构建出一个高效且用户友好的文件上传系统，实现了在不刷新页面的情况下完成文件上传，大大提升了Web应用的交互性。理解这些技术的结合和交互，对于任何...

    使用struts 2 和ajaxFileUpload组件实现图片上传预览（完整版）

    在本文中，我们将详细介绍如何使用Struts 2和AjaxFileUpload组件来实现在Web应用程序中进行图片的上传与预览。 一、Struts 2 框架简介 Struts 2是一个基于MVC设计模式的Action驱动的框架，它提供了强大的控制器层，...

    AjaxFileUpload Struts2 多文件上传

    总的来说，通过结合AjaxFileUpload、jQuery和Struts2，我们可以实现一个高效、用户体验良好的多文件上传功能。在实际开发中，可能还需要考虑错误处理、进度条显示、预览功能等增强用户体验的细节。确保按照最佳实践...

    ajaxFileUpload+struts2实现多文件上传(源码)

    在本文中，我们将深入探讨如何使用`ajaxFileUpload`与`Struts2`框架结合，实现多文件上传功能。这个示例源码提供了一个实用的方法，使得用户可以在不刷新整个页面的情况下，上传多个文件，提高了用户体验。 首先，`...

    AjaxFileUpload+Struts2实现多文件上传功能

    本文重点给大家介绍AjaxFileUpload+Struts2实现多文件上传功能，具体实现代码大家参考下本文。 单文件和多文件的实现区别主要修改两点， 一是插件ajaxfileupload.js里接收file文件ID的方式 二是后台action是数组形式...

    ajax+jquery+struct+ajaxfileupload有增删改功能上传文件例子

    在IT行业中，构建一个...以上就是使用Ajax、jQuery、Struts和AjaxFileUpload实现有增删改功能的文件上传系统的核心知识和技术点。这个例子展示了如何利用现代Web技术提高用户体验，同时也体现了前后端分离的设计思想。

    AjaxFileUpload结合Struts2实现多文件上传(动态添加文件上传框)

    因此，本文介绍了如何使用AjaxFileUpload结合Struts2实现多文件上传，并且支持动态添加文件上传框。 首先，要实现动态添加删除文件上传框，需要使用JavaScript（推荐使用jQuery库简化操作），监听添加按钮的点击...

    struts2异步上传

    Struts2是一个非常流行的... Struts2异步上传结合了Struts2框架、jQuery、Ajax、JSON插件和文件处理策略，为用户提供了无刷新的文件上传体验。理解并熟练掌握这些组件和技术，对于开发高效、安全的Web应用至关重要。

    j​q​u​e​r​y​ ​i​m​g​a​r​e​a​s​e​l​e​c​t​ + ajaxfileupload + struts2实现图片的异步上传裁剪

    总体而言，这个项目利用了前端和后端的协同工作，通过jQuery imgAreaSelect实现用户友好的图片裁剪交互，ajaxfileupload实现无刷新的文件传输，以及Struts2处理服务器端的业务逻辑。这种方式提高了用户体验，同时也...

    jquery之ajaxfileupload异步上传插件(附工程代码)

    点我下载工程代码 由于项目需求，在处理文件... 所需环境： jquery.js ajaxfileupload.js struts2所依赖的jar包 及struts2-json-plugin-2.1.8.1.jar 编写文件上传的Action 代码如下: package com.ajaxfile.action; imp

    jquery ajaxfileupload异步上传插件

    在本文中，我们将探讨如何使用jQuery的ajaxfileupload插件实现异步文件上传，并结合Struts2框架进行处理。这个插件提供了一种方便的方法，允许用户在不刷新页面的情况下上传文件，提升用户体验。 首先，要使用...

    Struts2+ajax+json异步上传图片回显

    3. **配置Struts2**：在struts.xml配置文件中，配置Action类和对应的result类型，确保Struts2能够正确处理文件上传请求。 4. **后端处理**：在服务器端，我们可能需要检查文件大小、类型等，确保安全。保存文件后，...

    struts jquery 上传

    在Struts中，文件上传通常依赖于`struts2-convention-plugin`和`struts2-plugins`中的`struts2-file-uploading`插件。这些插件提供了处理文件上传请求的Action和结果类型。首先，我们需要在Struts配置文件(`struts....

    struts2加jquery加Jcrop实现头像剪切上传

    自己通过ajaxfileupload.js结合struts2实现图片上传文件，并通过jcrop和java图像处理功能实现了图片剪切的功能。该功能效果和新浪QQ的头像上传功能效果一样，在ie下可以正常使用 火狐下更换图片时效果样式会走形

    JSP使用ajaxFileUpload.js实现跨域问题.docx

    本文主要介绍如何在JSP项目中使用`ajaxFileUpload.js`插件解决跨域文件上传的问题，并提供了一个具体的示例代码，包括前端JS部分以及后端JSP和Struts2相关的处理逻辑。通过这个例子，我们可以深入了解整个跨域文件...

    struts2的上传和下载功能

    在Struts2中，实现文件上传和下载功能是常见的需求，这对于处理用户交互，如提交表单、交换大文件等，至关重要。下面我们将深入探讨如何在Struts2中实现这些功能，并基于提供的文件名称来解析关键知识点。 首先，...

    struts2使用注解的上传下载功能

    以上是Struts2使用注解实现上传下载功能的基本步骤和涉及的关键点。注意，实际项目中需要考虑错误处理、安全措施（如限制文件类型和大小）、以及性能优化。确保对上传的文件进行验证，避免恶意文件的上传，同时，...

Magicbox
Global site tag (gtag.js) - Google Analytics