采用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. Qt动态库静态库的创建、使用、多级库依赖、动态库改成静态库等详细说明

    本文描述的是windows系统下,通过qtcreator在pro文件中添加动态库与静态库的方法: 1.添加动态库(直接添加动态库文件.dll,非子项目) 通过qtcreator创建动态库的方法就不在此 ...

  2. Oracle DBA神器之Toad

    很早就听说Toad功能很强大,一直没有使用过,因为PLSQL Developer就很好用.前几天看见同事优化Oracle就是用的Toad,有一些很强大的管理功能,于是再一次对Toad产生兴趣,收集了一 ...

  3. laravel 5.4 中使用migrate

    1. 创建表结构 a. 命令: php artisan make:migration create_posts_table 2.生产文件 <?php use Illuminate\Support ...

  4. 基于Java实现批量下载网络图片

    昨天朋友做项目遇到一个需求,需要把上千个的微博表情图片下载到本地磁盘,并做好规范命名,塞给我一堆Json数据,让我帮忙处理下,反正闲着也没事干,就帮忙写了.(很简单的一个功能,随手记录下,刚好填补下最 ...

  5. history 命令历史

    在终端中按捉[Ctrl]键的同时[r]键,出现提示:(reverse-i-search),此时你尝试一下输入你以前输入过的命令,当你每输入一个字符 的时候,终端都会滚动显示你的历史命令.当显示到你想找 ...

  6. [React] 13 - Redux: react-redux

    Ref: Redux 入门教程(三):React-Redux 的用法 组件拆分规范 使用 React-Redux,需要掌握额外的 API,并且要遵守它的组件拆分规范. React-Redux 将所有组 ...

  7. 10.5ORM回顾(2)

    2018-10-5 14:47:57 越努力越幸运!永远不要高估自己! ORM的聚合和分组查询!!! # #####################聚合和分组##################### ...

  8. Web(二)

    一.数据的传递--转发和重定向 1.创建一个login.jsp页面  <body>     <%-- action:我们需要提交的地址  method:请求的方式 --%>   ...

  9. git rebase 操作撤销

    git rebase可以更改提交历史,在不影响别人的情况下,能够重整git树. 但如果git rebase操作失误,却在push后才发现,怎么撤销rebase操作呢? 使用git reflog + g ...

  10. 怎么给button设置背景颜色?【Android】

    怎么给button设置背景颜色?[Android] 怎么给button设置背景颜色?[Android] 现在我想给按钮添加背景颜色,怎么做 1.android:background="@an ...