<div class="iteye-blog-content-contain" style="font-size: 14px"><p>图片上传功能</p>
<input type=file class="upImg" name="myfiles" id="doc" onchange="javascript:setImagePreview();" multiple="multiple">
<div id="localImag" style="display: inline-block; width: 40%; vertical-align: top; text-align: center;"><img id="preview" style="diplay: none;" alt="" width="-1" height="-1" /></div>
<script type="text/javascript">// <![CDATA[
function setImagePreview() {
var docObj=document.getElementById("doc");
var imgObjPreview=document.getElementById("preview");
if(docObj.files && docObj.files[0]){
//火狐下,直接设img属性
imgObjPreview.style.display = 'inline-block';
imgObjPreview.style.width = '401px';
imgObjPreview.style.height = '201px';
$('#imgsrc').val(docObj.files[0].name);
try{
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
$.ajaxFileUpload({
//处理文件上传操作的服务器端地址(可以传参数,已亲测可用)
url:"/manage.onigiri/userInfo/cancleBindCard/imageFileUpload",
secureuri:false, //是否启用安全提交,默认为false
fileElementId:'doc', //文件选择框的id属性
fileSize:10240000,
allowType:'jpg,jpeg,png,JPG,JPEG,PNG,gif,GIF', //服务器返回的格式,可以是json或xml等
success:function(data, status){ //服务器响应成功时的处理函数
if(status == 'success'){
alert("图片上传成功!!!");
}
},
error:function(data, status, e){ //服务器响应失败时的处理函数
alert("图片上传失败!!!");
}
});
}catch(e){
alert("您上传的图片格式不正确,请重新选择!");
return false;
}
}else{
//IE下,使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
imgObjPreview.style.width = '401px';
imgObjPreview.style.height = '201px';
//图片异常的捕捉,防止用户修改后缀来伪造图片
try{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}catch(e){
alert("您上传的图片格式不正确,请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
// ]]></script></div>
/**后台文件处理*/
@RequestMapping(value="/cancleBindCard/imageFileUpload", method = RequestMethod.POST)
public Object imageFileUpload(@RequestParam MultipartFile[] myfiles, HttpServletRequest request, HttpServletResponse response){
Object retObj = null;
String type = request.getParameter("type");
//可以在上传文件的同时接收其它参数
response.setContentType("text/plain; charset=UTF-8");
String originalFilename = null;
String path1 = request.getSession().getServletContext().getRealPath("");
path1 = path1.substring(0, path1.length()-16);
String realPath = STATIC_PATH + imgUrl;
for(MultipartFile myfile : myfiles){
if(myfile.isEmpty()){
retObj = Msg.error("请选择文件后上传");
}else{
try {
Thread.sleep(100);
UploadAction upa = new UploadAction();
upa.sendMultiFile(myfile.getInputStream(), realPath + myfile.getOriginalFilename());
return Msg.info("上传成功!");
} catch (Exception e) {
if("attach"==type){
logger.error("文件[" + myfile.getOriginalFilename() + "]上传失败,堆栈轨迹如下");
}else{
logger.error("文件[" + originalFilename + "]上传失败,堆栈轨迹如下");
}
retObj = Msg.error("文件上传失败,请重试!");
}
}
}
return retObj;
}
//具体上传的文件HTTP处理没有写
相关推荐
在这个"springMVC图片上传示例"项目中,我们将深入探讨如何在SpringMVC环境中实现图片附件的上传功能,包括多图上传、图片预览及文本域传值。 一、SpringMVC概述 SpringMVC是Spring框架的一部分,它遵循模型-视图-...
在本文中,我们将深入探讨如何基于Springmvc实现图片上传及生成缩略图的功能。Springmvc是Spring框架的一个重要模块,用于构建MVC模式的Web应用,它提供了强大的数据绑定、模型映射、视图渲染等功能,是Java开发中的...
SpringMVC是Spring框架的一部分,专门用于处理Web应用程序的模型-视图-控制器(MVC)架构。在SpringMVC中实现文件上传是一项常见的任务,它允许...通过深入理解这些概念,你可以构建出更加健壮和安全的文件上传功能。
总的来说,Spring MVC和Vue.js的结合提供了强大的文件上传功能,允许开发者创建直观的用户界面,同时在后端进行安全、可控的文件处理。理解这两个技术如何协同工作对于构建现代Web应用程序至关重要。
在本文中,我们将深入探讨如何使用Spring MVC框架实现多图片上传功能,并结合描述中的关键点进行详细解析。Spring MVC是Spring框架的一部分,专门用于构建Web应用程序,提供了模型-视图-控制器(MVC)架构模式的支持...
以上就是使用Spring MVC实现本地图片上传、存储到数据库并实时显示的关键步骤和知识点。这涉及到前端交互、后端处理、文件操作、数据库存储和视图渲染等多个层面,每个环节都需要细心处理以确保功能的正常运行和系统...
综上所述,"java-springmvc图片上传"项目展示了如何利用Spring MVC框架实现一个简单的图片上传功能,涉及到了Spring MVC的基本结构、文件上传处理、控制器设计、视图渲染、配置以及安全性方面的考量。理解这些知识点...
总的来说,SpringMVC结合Ajax提供了一种强大的方式来实现异步图片上传功能,它可以大大提高Web应用的交互性和用户体验。在压缩包`spring_ajax_photo`中,可能包含了实现这一功能的完整源代码,包括前端HTML、CSS、...
在本文中,我们将深入探讨如何使用Spring MVC框架创建一个图片上传功能,并且集成进度条来实时展示上传进度。Spring MVC是Spring框架的一部分,它提供了一种模型-视图-控制器(MVC)架构,用于构建Web应用程序。在这...
在这个项目中,我们主要关注的是如何在SSM框架下实现图片上传并将其信息存储到数据库,以及如何将已存储的图片信息回显出来。 首先,`Spring`作为核心容器,负责管理应用中的所有Bean,提供依赖注入(Dependency ...
在本文中,我们将深入探讨如何使用Spring MVC框架与WebUploader库来实现一个高效且用户友好的图片上传功能。Spring MVC是Java开发中的一个流行MVC(Model-View-Controller)框架,而WebUploader则是一个轻量级的...
以上就是使用Spring、SpringMVC和MyBatis实现图片上传和回显的基本流程。需要注意的是,实际项目中还需要考虑文件名冲突、文件大小限制、异常处理、安全性(如防止XSS攻击)等问题。同时,对于大型项目,可能需要...
标题 "layui+springMvc富文本编辑器图片上传功能.rar" 提供的是一个集成layui富文本编辑器与SpringMvc后台服务的图片上传解决方案。这个压缩包包含了一整套用于实现这一功能的代码和配置,适用于使用Java开发的Web...
在IT行业中,构建一个能够处理图片上传和下载功能的Web应用是常见的需求。在这个场景下,我们使用了Bootstrap、Spring MVC和Spring这三个强大的技术栈来实现这一目标。下面将详细阐述这三个技术如何协同工作,以及...
通过"springmvc文件上传练习项目",你可以实际操作以上步骤,熟悉文件上传的整个流程,从而更好地理解和应用Spring MVC中的文件上传功能。实践中遇到的问题和解决方案也会加深你对这一知识点的理解。
总结来说,实现"springMVC测试上传文件并在页面上显示"的功能,需要处理前端的文件选择与提交,后端的文件接收、存储和解析,以及前端的数据展示。涉及的技术包括HTML5表单、Spring MVC的`@RequestParam`、`...
在本教程中,我们将深入探讨如何使用SpringMVC框架与阿里云对象存储服务(OSS)集成,实现在JavaWeb应用中...理解并掌握这些知识点,你将能够成功地在你的JavaWeb应用中实现从SpringMVC到阿里云OSS的图片文件上传功能。
在JavaEE企业级开发中,SpringMVC框架是广泛用于构建Web应用程序的工具,它提供了丰富的功能,包括处理文件上传和下载。本实验报告将详细阐述如何利用SpringMVC实现文件上传与下载的功能。 首先,文件上传的核心...
结合SpringMVC和Ajax,我们可以构建出一个高效的图片上传功能,用户可以在不离开当前页面的情况下完成操作,提高了交互体验。同时,通过SpringMVC的控制层和业务逻辑,可以对上传过程进行严格的控制和错误处理,确保...