bootstrap 图片上传实例

引入的包:

import java.io.File;
import java.util.Iterator;
import java.util.UUID;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.io.FileUtils;
import org.apache.struts2.ServletActionContext;

import com.gzzs.util.service.HandlerPath;
import com.opensymphony.xwork2.ActionSupport;

html:

<div style="margin-top: 10px; margin-left: 180px">
	<input id="specialrecommendfile" type="file" size="30"
	name="file">
	<button type="button" onclick="UploadSpecialRecommendPic()"
	class="btn btn-warning btn-lg">上传</button>
	<input type=hidden class="span5" id="specialRecommendPic"
	name="riIndexPic">
</div>

js:

function UploadSpecialRecommendPic() {
	$.ajaxFileUpload({
		url : '/GZZSServer/s_util/uploadSpecialRecommendPic.action',
		secureuri : false,
		fileElementId : 'specialrecommendfile',
		dataType : 'json',
		success : function(d, status) {
			var data = eval('(' + d + ')');
			alert(data.msg);
			if (data.flag == 1) {
				$("#SpecialTopicPicShow").attr("src", data.path);
				$("#specialRecommendPic").val(data.picName);
			}
		},
		error : function(data, status, e) {
			alert(e);
		}
	});
}

action:

public String uploadSpecialRecommendPic() {
		try {
			String path;
			path = "C://";
			FileUtils.copyFile(file, new File(path));
			result = "{flag:\"1\",msg:\"操作成功\",path:\""
					+ HandlerPath.getHostSimulateAuthorLogoPath()
					+ fileFileName + "\",picName:\"" + fileFileName + "\"}";
			return SUCCESS;
		} catch (Exception e) {
			e.printStackTrace();
			result = "{flag:\"0\",msg:\"操作失败\"}";
			return SUCCESS;
		}
}

实例图片:

时间: 2024-08-26 04:21:07

bootstrap 图片上传实例的相关文章

layui加tp5图片上传实例

<div class="layui-fluid"> <div class="layui-row"> <form class="layui-form"> <div class="layui-form-item"> <label for="username" class="layui-form-label"> <span cl

webuploader项目中多图片上传实例

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> 百度uploader Demo</title> <!--引入CSS--> <link rel="stylesheet" type="t

图片上传实例

jsp: <form action="/image/save.jhtml" method="post" enctype="multipart/form-data" style="width: 500px"> <input type="hidden" name="focusId" value="${image.focusId}"/> <in

uploadify多图片上传实例

upload.php <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>uploadify 多文件上传例子</title> <link rel="stylesheet" type="text/css" href="upload

bootstrap图片上传控件 fileinput

前端 1.要引用的js <link type="text/css" rel="stylesheet" href="~/HContent/css/fileinput.css" /> //-----------样式 <script src="~/HContent/js/fileinput.js"></script> //基本的js<script src="~/HContent/j

multer/express/node.js图片上传实例

前端 <form enctype="multipart/form-data" method="post"> <input type="file" id="avatar" name="avatar" /> <button>提交</button> </form> <script> $('button').click(function ()

MVC4中基于bootstrap和HTML5的图片上传Jquery自定义控件

场景:mvc4中上传图片,批量上传,上传前浏览,操作.图片进度条. 解决:自定义jquery控件 没有解决:非图片上传时,会有浏览样式的问题; 解决方案; 1.样式 – bootstrap 的css和图标与metro-ui-css的部分css 2.js 自定义控件 3.后台 mvc4 ------------------------------------------------- 1. [class*=border-color] { border: 2px solid; } .border-c

包含修改字体,图片上传等功能的文本输入框-Bootstrap

通过jQuery Bootstrap小插件,框任何一个div转换变成一个富文本编辑框,主要特色: 在Mac和window平台下自动针对常用操作绑定热键 可以拖拽插入图片,支持图片上传(也可以获取移动设备上的照片) 依赖于浏览器标准,没有标准代码:工具条和键盘均可定制,并且能够执行任何浏览器支持的命令 首先看一下效果: 接下来,上代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta c

Android图片文件上传实例

原文:Android图片文件上传实例 源代码下载地址:http://www.zuidaima.com/share/1550463718132736.htm 支持拍照图片上传和从手机相册中获取图片上传到服务器端的功能 源码截图