采用jquery.form.js异步上传图片,并结合<form>表单

<script type="text/javascript">
//采用jquery.form.js异步上传图片,并结合<form>表单 function uploadPicture() {
var options = {
//请求路径
url : "/upload/uploadPic.do",
dataType : "json",
type : "post",
success : function(data) {
//处理结果
//将相对路径设置给隐藏域中,提交时用
$("#imgUrl").val(data.path);
//将全路径设置给img标签,显示图片用
$("#allImgUrl").attr("src", data.url);
}
}
$("#jvForm").ajaxSubmit(options);
}
</script> <tr>
<td width="20%" class="pn-flabel pn-flabel-h"></td>
<td width="80%" class="pn-fcontent">
<img width="100" height="100" id="allImgUrl" />
<!-- 图片存在数据库的路径 -->
<input type="hidden" id="imgUrl" name="imgUrl"></input>
<input type="file" onchange="uploadPicture()" name="uploadPic" /></td>
</tr>

一定要在form表单中填写enctype="multipart/form-data"

<form id="jvForm" action="/brand/add.do" method="post" enctype="multipart/form-data">  </form>

在springmvc.xml文件中添加文件软件器

    <!-- 图片转换器 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="10485760"></property>
</bean>

编写文件上传UploadController.java

 package cn.lzc.code.controller.admin;

 import java.io.IOException;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Random; import javax.servlet.http.HttpServletResponse; import org.apache.commons.io.FilenameUtils;
import org.json.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile; import com.sun.jersey.api.client.Client;
import com.sun.jersey.api.client.ClientHandlerException;
import com.sun.jersey.api.client.UniformInterfaceException;
import com.sun.jersey.api.client.WebResource; import cn.lzc.code.web.Constants;
import cn.lzc.common.web.ResponseUtils; /**
* 上传文件管理Controller
*
* @author admin
*
*/
@Controller
public class UploadController { /**
* 异步上传图片
*
* @param uploadFile
* @param response
*/
@RequestMapping(value="/upload/uploadPic.do",method=RequestMethod.POST)
public void uploadBrandPic(@RequestParam(required = false) MultipartFile uploadPic, HttpServletResponse response) {
// 图片名称生成策略---采用时间格式(精确到毫秒)并追加随机3位(10以内)数字
// 精确到毫秒
DateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS");
String picName = df.format(new Date());
//随机再生成3位10以内的数
Random r=new Random();
for (int i = 0; i < 3; i++) {
picName+=r.nextInt(10);
}
//获取扩展名
String originalFilename = uploadPic.getOriginalFilename();
String ext = FilenameUtils.getExtension(originalFilename);
//相对路径
String path="upload/"+picName+"."+ext;
//全路径
String url="http://localhost:8088/image-web/"+path; //jersey发送另一台Tomcat(可读写)
// 实例化Jersey
Client client=new Client();
//想要发送到的服务器地址,记住,必须设置tomcat服务器的权限,不然无法上传到tomcat
//设置请求路径
WebResource resource = client.resource(url);
try {
//发送开始put
resource.put(String.class, uploadPic.getBytes());
} catch (UniformInterfaceException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (ClientHandlerException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//返回json数据给页面,(包括url回显路径,Path保存数据库的路径)
JSONObject jo=new JSONObject();
jo.put("path", path);
jo.put("url", url);
//返回数据给页面
ResponseUtils.renderJson(response, jo.toString());
}
}

写一个RequestUtils.java工具类,用来响应相应的数据到前台页面

 package cn.lzc.common.web;

 import java.io.IOException;

 import javax.servlet.http.HttpServletResponse;

 /**
* Response帮助类 支持JSON XML Text
*
* @author admin
*
*/ public class ResponseUtils {
// 发送Json
public static void renderJson(HttpServletResponse response, String text) {
rend(response, "application/json;charset=UTF-8", text);
} // 发送xml
public static void renderXml(HttpServletResponse response, String text) {
rend(response, "text/xml;charset=UTF-8", text);
} // 发送text
public static void renderText(HttpServletResponse response, String text) {
rend(response, "text/plain;charset=UTF-8", text);
} // 发送
public static void rend(HttpServletResponse response, String contextType, String text) {
// 设置传输类型
response.setContentType(contextType);
// 发送
try {
response.getWriter().write(text);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}

使用Jersey上传文件的更多相关文章

  1. jersey上传文件解决办法

    这两天在使用jersey 构建的jersey JAX-RS REST服务器,在通过POST方法上传文件的时候,如果根据example来操作的话会引发如下异常: SEVERE: Missing depe ...

  2. idea 内置tomcat jersey 上传文件报403错误

    Request processing failed; nested exception is com.sun.jersey.api.client.UniformInterfaceException: ...

  3. idea 内置tomcat jersey 跨服务器 上传文件报400错误

    报错内容 com.sun.jersey.api.client.UniformInterfaceException: PUT http://.jpg returned a response status ...

  4. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  5. 三种上传文件不刷新页面的方法讨论:iframe/FormData/FileReader

    发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"up ...

  6. asp.net mvc 上传文件

    转至:http://www.cnblogs.com/fonour/p/ajaxFileUpload.html 0.下载 http://files.cnblogs.com/files/fonour/aj ...

  7. app端上传文件至服务器后台,web端上传文件存储到服务器

    1.android前端发送服务器请求 在spring-mvc.xml 将过滤屏蔽(如果不屏蔽 ,文件流为空) <!-- <bean id="multipartResolver&q ...

  8. .net FTP上传文件

    FTP上传文件代码实现: private void UploadFileByWebClient() { WebClient webClient = new WebClient(); webClient ...

  9. 通过cmd完成FTP上传文件操作

    一直使用 FileZilla 这个工具进行相关的 FTP 操作,而在某一次版本升级之后,发现不太好用了,连接老是掉,再后来完全连接不上去. 改用了一段时间的 Web 版的 FTP 工具,后来那个页面也 ...

随机推荐

  1. 教程:SpagoBI开源商业智能之XML Template 图表模板

    SpagoBI offers a variety of widgets' examples realized with the Highcharts library, that can be divi ...

  2. Cisco DHCP Snooping + IPSG 功能实现

    什么是DHCP? DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)是一个局域网的网络协议,前身是BOOTP协议, 使用UDP协议工作,常用的2个端口 ...

  3. SpringMVC注解@RequestParam与RequestMapping全面解析

    1.@RequestParam用法: SpringMVC后台控制层获取参数的方式主要有两种, 一种是request.getParameter("name"), 另外一种是用注解@R ...

  4. [Laravel] 08 - Auth & Data Migration

    登录注册框架 一.加载Auth模块 Step 1, 安装Auth模块 生成相关 laravel 框架内部的代码模块: $ php artisan make:auth 自动添加了路由代码 在larave ...

  5. akka cluster 初体验

    cluster 配置 akka { actor { provider = "akka.cluster.ClusterActorRefProvider" } remote { log ...

  6. NLog类库的使用探索——认识配置+实习小感悟

    1 写在前面 1.1 为什么学了软件 1.高考失败,分数不高,不能随心所欲 2.农村孩子,学点技术,将来有口饭吃 3.有科技含量,想玩电脑(那个时候是这么想的,那个时候觉得学计算机就是玩电脑) 1.2 ...

  7. Elasticsearch 学习之 节点重启

    ElasticSearch集群的高可用和自平衡方案会在节点挂掉(重启)后自动在别的结点上复制该结点的分片,这将导致了大量的IO和网络开销.如果离开的节点重新加入集群,elasticsearch为了对数 ...

  8. 使用mui.js实现下拉刷新

    闲聊: 最近因公司项目需求,小颖需要写一些html5页面,方便公司IOS和Android给APP中嵌套使用,其中需要实现拉下刷新功能,其实就是调用了一下mui.js就可以啦嘻嘻,下面跟着小颖一起来看看 ...

  9. MacOS install configure php-fpm

    php-fpm 是预装在mac os上的,你只需要配置就好了.这个服务监听9000端口. 1. 为配置文件准备一些目录 mkdir -p /usr/share/php/var/run mkdir -p ...

  10. 10.24CRM完成

    2018-10-24 16:16:59 已经完成了crm项目: 项目做完了,这几天可以安静整理Django啦!!!把博客整理一下! 然后再过几天针就可以回学校啦!! 今天程序员节  节日快乐!hell ...