jquery 上传图片 java_jquery 异步提交表单 上传图片小例子
这次做ecshop项目用到了一些小东西,这里我就把在项目中用到的一个异步上传多个产品图片的小东西,不是多好,但是是我自己查资料搞出来的。放这里,给自己和大家一个参考,欢迎丢砖!(jquery+spring mvc +jquery.form.js).上代码:
一.传统型:
1.jsp页面(上传3张图片)注意:这里各个form表单里的DOM的ID都是有顾虑的哦
这里用到了一个jquery.form.js他是jquery中用来异步提交表单的插件
宝贝图片1:
宝贝图片2:
宝贝图片3:
$(document).ready(function() {
/* 图片上传 */
$(".imgSave").click(function(){
var objhid = $(this).next().val();//处理多个form获取相关对象问题
if ($("#imgInput"+objhid).val() == "") {//先判断是否已选择了文件
alert("please select a p_w_picpath to upload!");
return;
}
$("#imgid"+objhid).css("display","block");
$("#uploadImgForm"+objhid).ajaxSubmit({
dataType:'text',/
success:function(msg){//文件上传成功后执行,msg为服务器端返回的信息
var newimg = msg.substr(0,msg.length-1);
$("#Id"+objhid).val(newimg);
$("#imgid"+objhid).attr("src",newimg);
}
});
$("#imgInput"+objhid).val("");//清空文件域
return false; //防止刷新?
});
});
2.java控制器
/**
* 异步上传产品图片action
* @param request
* @param response
*/
@RequestMapping(value = "ajaximg", method = RequestMethod.POST)
public void ajaxGoodsImg(MultipartHttpServletRequest request,
HttpServletResponse response) {
PrintWriter out = null;
try {
response.setContentType("text/xml; charset=UTF-8");
// 以下两句为取消在本地的缓存
out = response.getWriter();
MultipartFile p_w_picpathfile = request.getFile("photo");
HttpSession session = request.getSession();
String flag = null;
if (null != p_w_picpathfile && 0 != p_w_picpathfile.getSize()) {
flag = Digest.saveFile(//这个方法就是具体的实现保存文件的功能了,若成功返回文件全路径,若失败则返回false字符串,这个方法自己看着写吧
session.getServletContext().getRealPath(""), p_w_picpathfile);
if (flag == "false") {
out.write("false");
}
out.write(flag);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
if (out != null) {
out.close();
}
}
}
二.spring + ajaxfileupload.js 实现不要表单异步上传图片
function uploadImage(fileId) {
$.ajaxFileUpload({
url:'/admin/article/addnewsp_w_picpaths',//用于文件上传的服务器端请求地址
secureuri:false,//一般设置为false
fileElementId:fileId,//文件上传空间的id属性
dataType: 'text',//返回值类型 一般设置为json
// data: {'faceurl':artType},扩展参数
success: function (data, status) //服务器成功响应处理函数
{
var fileInfo = jQuery.parseJSON(data);
alert("上传成功,返回图片路径:"+fileInfo.file_path);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});
return false;
}
java---Controller
@ResponseBody
@RequestMapping(value = "article/addnewsp_w_picpaths", method = RequestMethod.POST,produces="application/json")
public Map ajaxNewsUplodImg(MultipartHttpServletRequest request, HttpServletResponse response) {
response.setContentType("text/plain; charset=utf-8");
Map result = new HashMap();
MultipartFile file = request.getFile("file");
try {
if (!file.isEmpty()){
String orgFileName = file.getOriginalFilename();
if (Digest.isAcceptedFileType(orgFileName)) {
result.put("file_path",具体上传图片工具方法);
} else {
response.setStatus(HttpStatus.UNSUPPORTED_MEDIA_TYPE.value());
}
} else {
response.setStatus(HttpStatus.UNPROCESSABLE_ENTITY.value());
}
} catch(Exception e) {
response.setStatus(HttpStatus.INTERNAL_SERVER_ERROR.value());
Logger.getLogger(ArticleController.class.getName()).log(Level.SEVERE, null, e);
}
return result;
}
jquery 上传图片 java_jquery 异步提交表单 上传图片小例子相关推荐
- jQuery.Form.js 异步提交表单使用总结
jQuery.Form.js 是一个用于使用jQuery异步提交表单的插件,它使用方法简单,支持同步和异步两种方式提交. 第一步:引入jQuery与jQuery.Form.js 1 <scrip ...
- 如何异步提交表单 如何异步跨域提交表单
1.使用post提交方式 2.构造表单的数格式 3.结合form表单的submit调用ajax的回调函数. 代码: 使用 jQuery 异步提交表单 <html xmlns="http ...
- 通过jQuery中的ajaxSubmit()提交表单
1.为什么使用:通过ajaxSubmit()方式可以在不刷新页面的情况下异步提交表单 2.前提:除了引入必要的jquery.js外还要引入js/jquery.form.js 3.使用实例: <s ...
- 一款基于jquery ui的动画提交表单
今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览 源码下载 实现的代码. html代码: & ...
- jquery 通过submit()方法 提交表单示例
jquery 通过submit()方法 提交表单示例: 本示例:以用户注册作为例子.使用jquery中的submit()方法实现表单提交. 注:本示例仅提供了对表单的验证,本例只用选用了三个字段作为测 ...
- Jquery.form自动提交表单上传图片
先引入相关js文件 1 2 <script type="text/javascript" src="jquery-1.7.2.min.js">< ...
- jquery $('#form1').serialize()序列化提交表单总结
1.$("#form1").serialize() 把form表单的值序列化成一个字符串,如username=admin&password=admin123<form ...
- 异步提交表单插件jquery.form.min.js的使用实例
因为项目中需要达到效果:前台点击按钮弹出文件选择框,选择文件确定之后,上传到后台对文件进行处理并给出响应信息. 尝试过使用$.post,$.ajsx,将表单序列化之后传到后台,但是后台并不能收到文件, ...
- MVC之AJAX异步提交表单
第一种用法: 在MVC中,依然可以使用ajax校验,跟在WebForm中的使用时一样的,唯一的区别就是将以前的URL路劲改为访问控制器下的行为 前台 <html> <head> ...
最新文章
- np.eye()的函数能将一个label数组,大小为(1,m)或者(m,1)的数组,转化成one-hot数组
- 如何对工业交换机端口进行调试?
- canvas笔记-使用canvas画矩形及各样式(透明)
- .NET 对接JAVA 使用Modulus,Exponent RSA 加密
- Github-初始化仓库
- MongoDB学习(一)Centos6.5下安装mongoDB
- ASP.NET的页面生存周期 [转]
- python格式化输出类型_Python格式化输出format方法需要限定数据类型吗?
- c语言考试笔试技巧,全国二级C语言,要考试了这些技巧你知道么?
- mysql服务启动失败
- 刚毕业的大学夫妻,我含泪看完(转帖)
- QQ音乐API爬取全过程
- 基于LM331的电压-频率转换电路详细介绍
- mybatis insert返回自增主键的id值
- 3个小时学会wordpress模板制作
- RN-Flex Box---基础
- jquery.countdown.js一个时间倒计时的插件
- docker简介及使用国内镜像源安装docker
- RPA教学——键盘输入技巧
- 人脸识别打卡项目(2)